object-fit 解决图片指定大小被压缩问题

object-fit 解决图片指定大小被压缩问题

第一次遇到这个属性,是在给video 写 poster的时候,选取的作为poster的img的尺寸有点小,导致video播放器两边有留白。在控制台查看video默认样式的时候看到了这个属性。

chrome中默认是object-fit:contain,当poster尺寸过小的时候就会如下问题:

注意播放器两边的留白,显然 这不是我们想要的样式,如果能完全覆盖就更好了。尝试按照background-size属性的写法尝试了改写为cover。效果如下:

perfect,可是还有点美中不足。。。不过我们还是先来了解下object-fit这个属性。

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width. —MDN

MDN上给的解释,object-fit这个属性指定可替换元素在已被设定好的宽高中展示的方式。

也就是说以前我们给img指定宽高,会影响图像本身的比例,导致被压缩拉伸等。现在我们可以通过object-fit来控制这个图像在指定宽高中如何显示的问题(或者可以这样理解,我们指定图片的宽高,就相当于是一个指定大小的div,我们调整图片的object-fit属性,就相当于给这个div调整背景的background-size属性)

一共有五个值fill | contain | cover | none | scale-down效果可以在这里查看

下面是在项目中应用的场景:

这是我在淘宝头条的文章list上截取的图片。可以看出它的文章配图都是采用div.pic通过内联的background-image来显示配图的。用意 很明显,当从文章提取的图片和文章list的展示块尺寸比例不一致的时候,背景图可通过指定background-size:cover来避免对图片造成的压缩或者拉伸。

下图是我用object-fit:fit对结构的一次改写:

这样页面的结构更为清晰,语义化更好,而且对前端绑定数据更为方便。

(这里我们不讨论更深层次的img和背景图的优劣势问题)

另外还有一个object-position和background-position性质差不多,我可以指定显示的位置,来完成上面我说的美中不足的问题~

我们来看下兼容性的问题,可以看出虽然是个草案属性,但是浏览器在移动端支持度还是挺好的。在移动端开发还是可以应用这个属性的。

推荐阅读更多精彩内容