项目中图片用的Img标签src引入图片,但是要图片全部再固定宽高中,前面只知道用背景图可以设置background-size设置,img不会,后面研究之后终于解决了;
一:background-size: contain 与cover的区别:
作用: 都是将图片以相同宽高比缩放以适应整个容器的宽高。
不同之处在于:
在no-repeat情况下,如果容器宽高比与图片宽高比不同,
cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;
contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;
PS:其实,从英文的意思来说:cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当,contain意为“包含”--也就是:我图片虽然缩放了,但是整个图是被“包含”在你里面的,你必须把我显示完整、不能裁剪我一丝一毫~在repeat情况下:cover:与上述相同;contain:容器内至少有一张完整的图,容器留白区域则平铺背景图,铺不下的再裁掉。
二:如果是img便签
object-fit: contain; // contain与cover与background-size一样的用法