CSS 如何仅使用 img 标签仅显示图像的一部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9624118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show only a portion of an image just by using the img tag?
提问by JoJo
Currently, all my images look like this:
目前，我所有的图像都是这样的：
HTML
HTML
<img class="photo" src="foo.png" />
CSS
CSS
.photo {
padding: 3px;
border: 1px solid #000;
background: #fff;
width: 64px;
height: 64px;
display: block;
}
This expects the aspect ratio of the image to always be 1:1. Now, a new project requirement has come in that the images do not have to be 1:1. Rather, they can be tall rectangles:
这期望图像的纵横比始终为 1:1。现在，出现了一个新的项目要求，即图像不必是 1:1。相反，它们可以是高矩形：
In this case, I would like to only reveal the topmost square of the image:
在这种情况下，我只想显示图像最上面的方块：
How can this be done with a single <img>tag? I know how to do it with two tags - just wrap the imgwith a div, apply 3px padding to the div and place the URL as the background-imageof the img. But I would like to know how to do this in a cleaner way, without an additional HTML tag.
如何使用单个<img>标签完成此操作？我知道如何使用两个标记做-只是换了img一个div，申请的3px填充到div，并把URL作为background-image的img。但我想知道如何以更简洁的方式做到这一点，而无需额外的 HTML 标签。
采纳答案by ScottS
Final Update--tested IE8+: This solutionuses a refinement of Surreal Dreams' idea of using outline for getting the border. This allows a cross browser simplicity compared to the linear-gradient methodI was previously going for. It works in IE7, except the outline(unsupported).
最终更新——经过 IE8+ 测试：此解决方案使用了 Surreal Dreams 使用轮廓获取边框的想法的改进。与我之前使用的线性梯度方法相比，这允许跨浏览器的简单性。它适用于 IE7，除了outline（不支持）。
Keeping it as an imgtag with a srckeeps it semantic.
将其保留为img带有src保持其语义的标签。
A margin: 1pxis applied to give the outline"space" in the layout, since by nature outlinetakes up no space. The zero height suppresses the main image, and the padding is used create the desired height for the background image (which is set the same as the main image) to show.
Amargin: 1px用于outline在布局中提供“空间”，因为本质outline上不占用空间。零高度抑制主图像，并且使用填充为背景图像（设置与主图像相同）创建所需的高度以显示。
HTML
HTML
<img class="photo" src="foo.png" style="background-image: url(foo.png)" />
CSS
CSS
.photo {
padding: 64px 0 0 0;
border: 3px solid #fff;
outline: 1px solid #000;
margin: 1px;
width: 64px;
height: 0px;
display: block;
}
回答by Alex
Take a look at the clipproperty.
看一看clip楼盘。
http://www.w3schools.com/cssref/pr_pos_clip.asp
http://www.w3schools.com/cssref/pr_pos_clip.asp
Here an example with your image: http://jsfiddle.net/2U3CE/1/
这是您的图像示例：http: //jsfiddle.net/2U3CE/1/
Code:
代码：
img{
position:absolute;
clip:rect(0,73px,73px,0);
}
回答by Surreal Dreams
Actually, you can do this with a single tag - one div. Does it matter that it's not one img tag?
实际上，您可以使用单个标签（一个 div）来完成此操作。它不是一个 img 标签有关系吗？
<div style="display: inline-block; width: 50px; height: 50px; background: url(test.jpg);"></div>
You never use an <img>tag, you just set up the div and you're done. Set the size, add padding, border, etc, and preferable put all the reusable styles into a class and set the background image on a per div basis. You end up with this:
你从不使用<img>标签，你只需设置 div 就完成了。设置大小，添加内边距、边框等，最好将所有可重用的样式放在一个类中，并在每个 div 的基础上设置背景图像。你最终得到这个：
<div class="hip2bsquare" style="background: url(test.jpg);"></div>
CSS:
CSS：
.hip2bsquare {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid #FFF;
outline: 1px solid #000;
}
This uses the border to add white and outline to add black. It's probably an abuse of the box model, but it should give you the visual.
这使用边框添加白色和轮廓添加黑色。这可能是对盒模型的滥用，但它应该为您提供视觉效果。
回答by Sven Bieder
回答by rcurts
I think you're looking for the CLIP property within CSS:
我认为您正在 CSS 中寻找 CLIP 属性：
.photo-clipped {
position: absolute;
clip: rect(0px,64px,64px,0px);
}
<img src="some_image.gif" class="photo photo-clipped" />
