今天在项目中遇到图片居中的问题,嗯,之前也有写过解决这个问题的文章,有n种方法。不过今天要说一个新的方案: object-fit ,嗯,这个才是真的方便的方案啊。
先看预览:
查看详细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 ,不多说了。
囧~~,写完了才发现大神 张鑫旭之前写过一篇 。。。