如何仅使用img标签显示图像的一部分？

Question

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

HTML

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

CSS

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

这要求图像的宽高比始终为1：1。现在，出现了一个新的项目要求，即图像不必是1：1。相反，它们可以是高大的矩形：

在这种情况下，我只想揭示图像的最顶层：

如何使用单个<img>标记完成此操作？我知道如何使用两个标记来执行此操作 - 只需使用img包裹div，将3px填充应用于div并将网址设置为background-image的{​​{1}} 。但我想知道如何以更清洁的方式执行此操作，而无需额外的HTML标记。

Answer 1

查看clip属性。

http://www.w3schools.com/cssref/pr_pos_clip.asp

以下是您的图片示例： http://jsfiddle.net/2U3CE/1/

代码：

img{
    position:absolute;
    clip:rect(0,73px,73px,0);
}

Answer 2

最终更新 - 经过测试的IE8 + ：This solution使用了Surreal Dreams改进边框的概念。与以前的the linear-gradient method相比，这允许跨浏览器的简单性。它适用于IE7，但outline（不支持）。

除外

将其保留为img标记src，使其保持语义。

应用margin: 1px来在布局中提供outline“空格”，因为本质上outline不占用任何空间。零高度抑制主图像，并使用填充为背景图像（设置与主图像设置相同）创建所需高度。

HTML

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

CSS

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

Answer 3

实际上，您可以使用单个标记执行此操作 - 一个div。它不是一个img标签是否重要？

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

你永远不会使用<img>标签，你只需设置div即可。设置大小，添加填充，边框等，最好将所有可重用的样式放入一个类中，并按每个div设置背景图像。你最终得到了这个：

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

CSS：

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

这使用边框添加白色和轮廓添加黑色。这可能是对盒子模型的滥用，但它应该给你视觉效果。

Answer 4

使用剪辑

http://www.w3schools.com/cssref/pr_pos_clip.asp

Answer 5

我认为你在CSS中寻找CLIP属性：

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

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