我想要一个图像来填充其容器宽度的100%,并且我希望它具有设置的max-heigth属性,所有这些都保持纵横比但允许丢失图像的任何部分.
img { max-height:200px; width:100%; }
我知道使用background-size属性可以做类似的事情,但我想将其设为内联< img>标签.
我怎么能用CSS实现这个目标?还是javascript?
解决方法
您可以尝试使用CSS3
object-fit
,并查看浏览器支持
tables.
CSS3
object-fit
/object-position
Method of specifying how an object (image or video) should fit inside
its Box. object-fit options include “contain” (fit according to aspect
ratio),“fill” (stretches object to fill) and “cover” (overflows Box
but maintains ratio),where object-position allows the object to be
repositioned like background-image does.
.container { width: 200px; /*any size*/ height: 200px; /*any size*/ } .object-fit-cover { width: 100%; height: 100%; object-fit: cover; /*magic*/ }
<div class="container"> <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg"> </div>
相关信息:
> Exploring object-fit ★ Mozilla Hacks
> Polyfill for CSS object-fit property
原文地址:https://www.jb51.cc/html/227225.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。