图片铺满展示不变形object-position/object-fit

如何让不同尺寸的图片内容铺满一个框框展示而且不变形呢?

方法1:背景图

是的,用背景图,只需要 bcakground-size: contain; 即可搞定。用起来很方便,除了不太符合语义化。

 

方法2:object-fit 类似于

这个是css3新增在img上的属性,效果类似于background-size;

object-fit:contain    ===    background-size:contain    保持比例包含,相当于内切

object-fit:cover    ===    background-size:cover  保持比例铺满,相当于外切

object-fit:fill    ===    background-size:100% 拉伸铺满

使用方法:

<img style="height: 360px;object-fit: contain;width: 54px;" />

兼容性参考:https://caniuse.com/#search=object-fit

顺便介绍下object-position吧,参考mdn,很好用的,类似于background-position。主要是处理content-area在元素box-area中的位置。

方法3:scale

放大也是一个好方法。

fed123版权所有,转载请保留出处:前端123学堂 » 图片铺满展示不变形object-position/object-fit

赞 (0) 打赏

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏