1.object-fit
object-fit CSS 属性指定可替换元素的内容应该如何适应到其应用的高度和宽度确定的框。
您能够通过应用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐形式。
2. 属性值
object-fit: fill / contain / cover / none / scale-down;
3. 区别
3.1fill
默认值。内容拉伸填满整个 content box, 不保障放弃原有的比例。
3.2contain
放弃原有尺寸比例。长度和高度中短的那条边跟容器大小统一,长的那条等比缩放,可能会有留白。
3.3cover
放弃原有尺寸比例。宽度和高度中长的那条边跟容器大小统一,短的那条等比缩放。可能会有局部区域不可见。
3.4none
放弃原有尺寸比例。同时放弃替换内容原始尺寸大小。
3.5 scale-down
放弃原有尺寸比例如果容器尺寸大于图片内容尺寸,放弃图片的原有尺寸,不会放大失真; 容器尺寸小于图片内容尺寸,用法跟 contain—样。