Html 以与背景图像相同的方式在 <img> 标签中偏移可见图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3348881/
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
Offset viewable image in <img> tags the same way as for background-image
提问by Metalshark
Using plain <img> tags is it possible to offset the image in the same way as you can with CSS background-image and background-position?
使用普通的 <img> 标签是否可以像使用 CSS background-image 和 background-position 一样偏移图像？
There are main images on the page and it makes little sense to have separate thumbnails when both will be loaded (thus increasing bandwidth). Some of the images are portrait and some are landscape, however I need to display the thumbnails at a uniform size (and crop off the excess where it fails to meet the desired aspect ratio).
页面上有主要图像，当两者都加载时拥有单独的缩略图几乎没有意义（从而增加带宽）。有些图像是纵向的，有些是横向的，但是我需要以统一的大小显示缩略图（并在无法满足所需纵横比的地方裁剪掉多余的图像）。
Although this is possible using other tags and background- CSS values the use of plain <img> tags would be preferable.
尽管使用其他标签和背景 CSS 值是可能的，但最好使用纯 <img> 标签。
采纳答案by martin
This is an old question, but it was the first one that came up when I googled the question, so I thought I would mention the answer that, in my opinion, actually solves the original problem how to emulate background-positionattribute. The answer I found is to use CSS attributes object-positionand object-fit. For example like this:
这是一个老问题，但这是我在 google 上搜索这个问题时出现的第一个问题，所以我想我会提到答案，在我看来，它实际上解决了如何模拟background-position属性的原始问题。我找到的答案是使用 CSS 属性object-position和object-fit. 例如像这样：
<img src="logos.png" style="object-fit: none; object-position: -64px 0; width: 32px; height: 32px" />
This will show the third thumbnail in the first row (assuming the thumbnails are arranged in a regular grid 32 x 32 pixels).
这将显示第一行中的第三个缩略图（假设缩略图以 32 x 32 像素的规则网格排列）。
回答by Pat
Unfortunately no, it's not possible with only an <img>tag. There are 2 solutions I can think of to your problem:
不幸的是，不，仅使用<img>标签是不可能的。对于您的问题，我可以想到两种解决方案：
CSS background-image
CSS 背景图片
Create a <div>where the image is applied as a background-image property:
创建一个<div>图像作为背景图像属性应用的地方：
<div class="thumbnail" style="background: url(an-image.jpg) no-repeat 50% 50%"></div>
CSS clipping
CSS 剪裁
Use the clip-pathproperty to only show a section of the image:
使用该clip-path属性仅显示图像的一部分：
<!-- Clip properties are top, right, bottom, left and define a rectangle by its top-left and bottom-right points -->
<div style="clip-path: inset(10px 200px 200px 10px)">
<img src="an-image.jpg">
</div>
You can read more about it in this article.
您可以在本文中阅读更多相关信息。
回答by quid
If you put the image in a div you can use the margins to move the image around. This particular example use a sprite image logo for the home link that changes position on hover. You could also skip the A tag and move the image around using the margin attribute on #logo img.
如果将图像放在 div 中，则可以使用边距来移动图像。这个特定的例子使用一个精灵图像标志作为主页链接，在悬停时改变位置。您还可以跳过 A 标记并使用 #logo img 上的边距属性移动图像。
The HTML:
HTML：
<div id="logo">
<a href="#">
<img src="img/src.jpg" />
</a>
</div>
The CSS:
CSS：
#logo {
display: block;
float: left;
margin: 15px 0;
padding: 0;
width: 350px; //portion of the image you wish to display
height: 50px; //portion of the image you wish to display
overflow: hidden; //hide the rest of the image
}
#logo img {
width: 350px;
height: 100px; // you'll see this is 2x the height of the viewed image
padding: 0;
margin: 0;
}
#logo a {
display: block;
float: left;
margin: 0;
padding: 0;
}
#logo a:hover {
margin-top: -50px; //move up to show the over portion of the image
}
Hope that helps!
希望有帮助！
回答by stevek
Before
前
<img src="img.png"> Text, Links, Etc
After:
后：
<img src="img.png" style="float:left; margin-bottom:-5px"> Text, Links, Etc
Read about Block-Formatting context on W3C.
阅读 W3C 上的块格式上下文。
回答by Frank Nocke
Some of the images are portrait and some are landscape, however I need to display the thumbnails at a uniform size (and crop off the excess where it fails to meet the desired aspect ratio).
有些图像是纵向的，有些是横向的，但是我需要以统一的大小显示缩略图（并在无法满足所需纵横比的地方裁剪掉多余的图像）。
Use background-size: coverwhich should exactlysolve that problem→ with good browser support!
使用background-size: cover它应该完全解决该问题→ 具有良好的浏览器支持！
And make you image the background (probably using background-imageas an inline style):
并让您对背景进行成像（可能background-image用作内联样式）：
<img style="background-image: url('img/foo.png')"/>
