< img>中的偏移可见图像标签的方式与background-image相同 [英] Offset viewable image in <img> tags the same way as for background-image

问题描述

使用plain< img>标签是否可以像使用CSS背景图像和背景位置一样偏移图像？

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?

页面上有主图像没有什么意义，有两个单独的缩略图将加载（因此增加带宽）。一些图像是纵向的，一些是横向的，但是我需要以统一的大小显示缩略图（并裁剪超出的部分不能满足所需的宽高比）。

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).

虽然这可以使用其他标签和背景CSS值，但是使用plain< img>

Although this is possible using other tags and background- CSS values the use of plain <img> tags would be preferable.

推荐答案

不幸的是，只有< img> / code>标记。有两种解决方案可以解决您的问题：

Unfortunately no, it's not possible with only an <img> tag. There are 2 solutions I can think of to your problem:

CSS background-image

创建一个< div> 图片作为背景图片属性应用：

Create a <div> where the image is applied as a background-image property:

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

CSS裁剪

使用 clip-path 属性只显示图片的一部分：

Use the clip-path property to only show a section of the image:

<!-- 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.

这篇关于&lt; img&gt;中的偏移可见图像标签的方式与background-image相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！