Css 如何仅通过使用img标记仅显示图像的一部分？

目前，我的所有图像都是这样的：

HTML

<img class="photo" src="foo.png" />

这期望图像的纵横比始终为1:1。现在，一个新的项目要求已经到来，即图像不必是1:1。相反，它们可以是高矩形：

在这种情况下，我只想显示图像最上面的正方形：

---

如何使用单个

标记来完成此操作？我知道如何用两个标签来做这件事——只需用

div

包装

img

，对div应用3px填充，并将URL作为

img

的

背景图像。但是我想知道如何以一种更干净的方式来做这件事，而不需要额外的HTML标记。
看看
clip
属性


下面是一个图像示例：

代码：

用夹子

我认为您正在寻找CSS中的CLIP属性：

.photo-clipped {
    position: absolute;
    clip: rect(0px,64px,64px,0px);
}

<img src="some_image.gif" class="photo photo-clipped" />

。照片剪辑{
位置：绝对位置；
剪辑：rect（0px，64px，64px，0px）；
}
实际上，你可以用一个标签——一个div来完成这项工作。不是一个img标签有关系吗

<div style="display: inline-block; width: 50px; height: 50px; background: url(test.jpg);"></div>

这将使用边框添加白色，使用轮廓添加黑色。这可能是对长方体模型的滥用，但它应该能给你视觉效果。
最终更新——经过测试的IE8+：使用超现实主义梦境的精髓，即使用轮廓来获得边界。与我之前所追求的相比，这允许跨浏览器的简单性。它在IE7中工作，除了
大纲
（不支持）

将其保留为带有
src的
img
标记将保持其语义

边距：1px
用于在布局中提供
轮廓
的“空间”，因为本质上
轮廓
不占用空间。零高度抑制主图像，填充用于创建要显示的背景图像（设置为与主图像相同）的所需高度

HTML

这种方法唯一的缺点是，它只适用于位置设置为绝对或固定的情况，这使得组织页面的时间非常糟糕。正如@aminuson所指出的，我不能拥有绝对/固定位置的图像。是的，这是神经紧张。您可以使用
位置放置div:relative围绕图像，但这不会很漂亮。注意：现在不推荐使用clip，应该改用clip。不过，使用除法会删除图像的语义。海报似乎更感兴趣的是使用单个标记来实现这一点，而不是保留代码的义义义。我只是把它扔了出去。无论OP是否喜欢这个想法，将来可能偶然发现该页面的任何人都应该知道这一点。此解决方案不允许我添加黑色边框和白色填充。我添加了一个CSS类，它将为您提供视觉效果。我不确定您是否在前面看过我的解决方案，但是因为JSFIDLE昨晚没有工作，所以直到今天我才能够改进它（因此它没有达到我的预期）。因此，如果您之前查看并注意到它不起作用，请尝试再次查看。要使它跨浏览器兼容，还有一个小难题需要解决。我需要让它在IE8和IE9中工作，而渐变在这些浏览器中不起作用。@JoJo--done！通过对超现实主义梦境概念的改进，我们有一个img标签，在IE8+中工作，可以随心所欲。
.photo-clipped {
    position: absolute;
    clip: rect(0px,64px,64px,0px);
}

<img src="some_image.gif" class="photo photo-clipped" />

<div style="display: inline-block; width: 50px; height: 50px; background: url(test.jpg);"></div>

<div class="hip2bsquare" style="background: url(test.jpg);"></div>

.hip2bsquare {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid #FFF;
    outline: 1px solid #000;
}

<img class="photo" src="foo.png" style="background-image: url(foo.png)" />

.photo {
   padding: 64px 0 0 0;
   border: 3px solid #fff;
   outline: 1px solid #000;
   margin: 1px;
   width: 64px;
   height: 0px;
   display: block;
}