0
点赞
收藏
分享

微信扫一扫

图片自适应居中留白

攻城狮Chova 2021-09-24 阅读 117
一点点

项目中图片用的Img标签src引入图片,但是要图片全部再固定宽高中,前面只知道用背景图可以设置background-size设置,img不会,后面研究之后终于解决了;

一:background-size: contain 与cover的区别:

作用: 都是将图片以相同宽高比缩放以适应整个容器的宽高。
不同之处在于:

  1. 在no-repeat情况下,如果容器宽高比与图片宽高比不同,
      cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;
      contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;
    PS:其实,从英文的意思来说:cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当,contain意为“包含”--也就是:我图片虽然缩放了,但是整个图是被“包含”在你里面的,你必须把我显示完整、不能裁剪我一丝一毫~

  2. 在repeat情况下:cover:与上述相同;contain:容器内至少有一张完整的图,容器留白区域则平铺背景图,铺不下的再裁掉。

二:如果是img便签

举报

相关推荐

0 条评论