在做项目的过程中,我们经常会遇到图片需要占满父容器的情况,可是图片完全拉伸占满父容器要么就变形了,要么就会留下空白,这样不美观,尽管图片可以做成背景等比例占满容器并且居中,但是那不是最完美的解决方案。
今天推荐一个css3新属性object-fit
这是原始图片,就是需要放进盒子里面的图片
object-fit有如下几个属性
fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
一般用这个属性都是想让图片不变形并且占满整个容器,所以用object-fit:cover真的很方便。不过要注意的是,这个是css3新属性,浏览器兼容性也是一个很大的问题,移动端的话用这个属性还是可以的。PC端的话不建议用这个属性了,毕竟IE8和IE8以下浏览器的用户群还是很多的,大约占网民的30%。