html – 标签中的可视图像与背景图像相同

使用普通< img>标签是否可以使用CSS背景图像和背景位置以相同的方式偏移图像？

页面上有主要图像，当两者都被加载时(因此增加带宽)，单独的缩略图是没有意义的。有些图像是纵向的，有些是横向的，但是我需要以均匀的尺寸显示缩略图(并在不符合所需宽高比的情况下裁掉多余的图像)。

虽然使用其他标签和background-CSS值可以使用plain< img>标签会更好。

解决方法

不幸的是，只有< img>这是不可能的。标签。我可以为您的问题考虑两种解决方案：

CSS背景图像

创建一个< div>将图像应用为背景图像属性的位置：

<div class="thumbnail" style="background: url(an-image.jpg) no-repeat 50% 50%"></div>

CSS剪辑

使用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>

你可以阅读更多关于它in this article。