Question

是否可以仅显示图像的中心部分。例如，使用CSS或JQUERY css的图像高度= 300像素和宽度= 520px会更好，否则我可以使用Jquery，谷歌搜索没有帮助我

有可能我只能使用css显示200 * 130的中心例如

 -----------------------
|                       |
|       --------        |
|      |Need this|      |
|      | Part    |      |
|       ---------       |
|_______________________|

Answer 1

您可以将图像设置为元素的bg，然后将其设置为：

<style type="text/css">
    div {
        background: #eee url(http://www.google.co.cr/logos/classicplus.png) center center;
        width: 100px;
        height:100px;
        border: 1px solid red;
        text-indent: -9999px;
    }
</style>
<div>some text that won't be seen</div>

最后得到类似http://jsfiddle.net/9nBRe/

的内容

Answer 2

设置以下CSS：

装置技术领域{

background-position：-200px -130px;
  背景图像：URL（ “image_name.png”）;
      宽度：200像素;高度：130px;

}

Answer 3

如果图像需要是<img>元素，则可以使用在中心打孔的透明“孔”的叠加图像来完成。

见http://jsfiddle.net/jkwSe/1/。

很难看，但顶部的图像是白色的，但是有一个透明的中心，就像一个长方形的甜甜圈。我在右边留下了一些图像，你可以看到效果。

Answer 4

试试这段代码： - 在这里，我们需要应用图像作为背景。我的意思是，我们不能放<img />标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Image Page</title>
</head>
<body>
<div style="height:300px;width:520px;text-align:center;">
<div style="width:200px;height:130px;background:Transparent url('http://www.bing.com/fd/hpk2/Nautilus_ROW880768633.jpg') center center;margin:85px auto;">&nbsp;</div>
</div>
</body>
</html>

Answer 5

现在可以使用CSS clip属性。有关详细信息，请参阅MDN docs

例如问题问题，代码将会出现：

img {
  position: absolute;
  rect: (50px, 195px, 50px, 195px);

}

剪辑需要position: absolute才能正常工作，因此将<img>置于<div>（或<figure>或观察者）并将其设置为position: relative可能是个好主意在文档流程中包含图像

Css仅显示图像的中心部分

5 个答案: