如何仅使用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,并把URL作为background-image的img.但我想知道如何以更干净的方式执行此操作,而无需额外的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 +:该解决方案使用了超现实梦想的改进概念,即使用轮廓来获取边界.与我之前的线性渐变方法相比,这允许跨浏览器简单.它适用于IE7,但outline(不支持)除外.

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

margin: 1px应用A 来给出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;
}