object-fit似乎是被人忽视的一个CSS3属性。因为存在兼容性,所以没有background-size
好用,但是由于某种情况,你不得不用img
标签来引入图片,这时候用object-fit
是很好的选择
完美解决!真的很方便,只需要一行css
默认值。整个对象将完全填充此框 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应 |
整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配该对象将被添加“黑边”。 |
被替换的内容大小保持其宽高比同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配该对象将被剪裁以适应。 |
内容的尺寸就像是指定了none或contain默認应用尺寸最小的值 |
我们用一张图片作为例子解析以上上面各个属性:
contain
不┅样,cover是以最大值为规定的。例如上图,图片的高度(较小值)首先达到父容器高度后,而宽度并未达到父容器的宽度,图片会继续'生长',直到宽度达到囷父容器宽度一致而等比伸缩的高度会溢出,溢出部分裁剪
当从文章提取的图片和文章list的展示块尺寸比例不一致的时候,背景图可通过指定 background-size:contain | cover
来避免对图片造成的压缩或者拉伸
background会根据ImageView组件给定的长宽进行拉伸而src就存放的是原图的大小,不会进行拉伸src是图片内容(前景),bg是背景可以同时使用。
如上所述background设置的图片会跟View组件给定的长宽仳例进行拉伸。举个例子 36x36 px的图标放在 xhdpi 文件夹中,在854x480(FWVGA对应hdpi)环境下,按照