先看预览：
查看详细demo
object-fit 只能用于『可替换元素』(replaced element) 。所谓可替换元素，是指元素的内容和表现不是由CSS控制的，渲染的外部元素，比如： img 、 object 、 video 和 表单元素，如 textarea 、 input ， audio 和 canvas 在一些特殊情况下，也可以作为可替换元素。
在使用 object-fit 时，一定要设定元素的size，也就是 width 和 height
直入正题， object-fit 有五个可选值，分别是：
用法也超级简单：
.cover{ object-fit: cover;}.contain{ object-fit: contain;}.fill{ object-fit: fill;}.scale-down{ object-fit: scale-down;} 当元素被 object-fit 裁切的时候，你一定想知道如何控制裁切的位置。 嗯，顾名思义， object-position 就是为了解决这个问题的。
不过， object-position 不难理解，类似 background-position ，不多说了。
囧~~，写完了才发现大神 张鑫旭之前写过一篇 。。
下载本文