如何在HTML/CSS中显示图像的一部分?

Let's say I want a way to display just the the center 50x50px of an image that's 250x250px in HTML. How can I do that. Also, is there a way to do this for css:url() references?

假设我想要一种方法来显示一个图像的中心50x50px在HTML中是250x250px。我怎么做呢。还有，有没有一种方法可以用于css:url()引用?

I'm aware of clip in CSS, but that seems to only work when used with absolute positioning.

我知道CSS中的剪辑，但这似乎只适用于绝对定位。

3 个解决方案

#1

One way to do it is to set the image you want to display as a background in a container (td, div, span etc) and then adjust background-position to get the sprite you want.

一种方法是将要显示的图像设置为容器中的背景(td、div、span等)，然后调整背景位置以获得所需的精灵。

#2

While you've already accepted an answer, I'll just add that there is the (somewhat little-known) clip css property, although it does require that the element being clipped is position: absolute; (which is a shame):

虽然您已经接受了一个答案，但我将添加一个(有些鲜为人知的)clip css属性，尽管它确实要求被裁剪的元素是position: absolute;(这是一个耻辱):

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}

<div class="container">
  <img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
  <img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>

JS Fiddle demo, for experimentation.

JS小提琴演示，用于实验。

To supplement the original answer – somewhat belatedly – I'm editing to show the use of clip-path, which has replaced the now-deprecated clip property.

为了补充最初的答案——有点晚了——我正在编辑以显示使用clip-path，它已经取代了现在已弃用的clip属性。

The clip-path property allows a range of options (more-so than the original clip), of:

剪切路径属性允许一系列选项(比原始剪辑多)，包括:

• inset — rectangular/cuboid shapes, defined with four values as 'distance-from' (top right bottom left).
• inset -矩形/长方体的形状，定义为“距离”(右上角左下角)。
• circle — circle(diameter at x-coordinate y-coordinate).
• 圆-圆(直径在x坐标y坐标)。
• ellipse — ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate).
• 椭圆-椭圆(x-轴长度y-轴长度在x-坐标y)。
• polygon — defined by a series of x/y coordinates in relation to the element's origin of the top-left corner. As the path is closed automatically the realistic minimum number of points for a polygon should be three, any fewer (two) is a line or (one) is a point: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• 多边形——由一系列x/y坐标定义，与元素左上角的原点相关。当路径自动闭合时，一个多边形的实际最小点数应该是3，任何少于(2)的点是一条直线或(1)是一个点:多边形(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3，等等)。
• url — this can be either a local URL (using a CSS id-selector) or the URL of an external file (using a file-path) to identify an SVG, though I've not experimented with either (as yet), so I can offer no insight as to their benefit or caveat.
• url——这可以是一个本地url(使用CSS id选择器)，也可以是一个外部文件的url(使用文件路径)来标识SVG，尽管我还没有尝试过(到目前为止)，因此我无法了解它们的好处或警告。

div.container {
  display: inline-block;
}
#rectangular {
  -webkit-clip-path: inset(30px 10px 30px 10px);
  clip-path: inset(30px 10px 30px 10px);
}
#circle {
  -webkit-clip-path: circle(75px at 50% 50%);
  clip-path: circle(75px at 50% 50%)
}
#ellipse {
  -webkit-clip-path: ellipse(75px 50px at 50% 50%);
  clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

<div class="container">
  <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

JS Fiddle demo, for experimentation.

JS小提琴演示，用于实验。

References:

引用:

• clip — note: deprecated.
• 剪辑——注意:弃用。
• clip-path (MDN).
• clip-path(MDN)。
• clip-path (W3C).
• clip-path(W3C)。

#3

Another alternative is the following, although not the cleanest as it assumes the image to be the only element in a container, such as in this case:

另一种选择是下面的，虽然不是最干净的，因为它假定映像是容器中唯一的元素，例如在本例中:

<header class="siteHeader">
  <img src="img" class="siteLogo" />
</header>

You can then use the container as a mask with the desired size, and surround the image with a negative margin to move it into the right position:

然后，你可以将容器作为理想尺寸的遮罩使用，并用一个负边缘将图像包围，使其移动到正确的位置:

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

Demo can be seen in this JSFiddle.

演示可以在这个JSFiddle中看到。

Only seems to work in IE>9, and probably all significant versions of all other browsers.

看来只能在IE>9中使用，而且可能是所有其他浏览器的所有重要版本。