使用普通< img>标签是否可以使用CSS背景图像和背景位置以相同的方式偏移图像?
页面上有主要图像,当两者都被加载时(因此增加带宽),单独的缩略图是没有意义的。有些图像是纵向的,有些是横向的,但是我需要以均匀的尺寸显示缩略图(并在不符合所需宽高比的情况下裁掉多余的图像)。
解决方法
不幸的是,只有< img>这是不可能的。标签。我可以为您的问题考虑两种解决方案:
CSS背景图像
<div class="thumbnail" style="background: url(an-image.jpg) no-repeat 50% 50%"></div>
CSS剪辑
<!-- 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。
原文地址:https://www.jb51.cc/html/232480.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。