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

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

chrome中默认是

object-fit:contain

，当poster尺寸过小的时候就会如下问题：



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



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


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性质差不多，我可以指定显示的位置，来完成上面我说的美中不足的问题~

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