object-fit:炒鸡方便的图片居中方法_html/css_WEB-ITnose

先看预览：

查看详细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;}

one more thing

object-position

当元素被 object-fit 裁切的时候，你一定想知道如何控制裁切的位置。 嗯，顾名思义， object-position 就是为了解决这个问题的。

不过， object-position 不难理解，类似 background-position ，不多说了。

浏览器兼容性

囧~~，写完了才发现大神 张鑫旭之前写过一篇 。。