html - 在 标签中以与背景图像相同的方式偏移可 View 像

Question

使用普通 标签是否可以像使用 CSS background-image 和 background-position 一样偏移图像？

页面上有主要图像，当两个图像都将加载时，单独的缩略图意义不大(因此会增加带宽)。有些图像是纵向的，有些是横向的，但是我需要以统一的尺寸显示缩略图(并剪掉无法满足所需纵横比的多余部分)。

虽然这可以使用其他标签和背景 CSS 值，但最好使用普通 标签。

Answer 1

很遗憾，不能，只有 <img> 是不可能的标签。对于您的问题，我可以想到 2 种解决方案:

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 .