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

设置图片的裁剪尺寸非常简单，你只需在 CSS 里使用这行代码：

1. img {
   
2.      object-fit: cover;
   
3. }

复制代码

就是这样。不需要语义、包装 div 或者其他没意义的代码。

这种技术能很好地把大小不合适的头像图片裁剪为正方形或者圆形的图片。以下面那只熊的宽图片来举例。一旦把 object-fit:cover 技术应用在这种图片上，并且设置好宽和高，图片自己就会进行裁剪和居中。

object-fit:cover 的裁剪方式和 background-size:cover 的完全相同，不过它是用来为 imgs、videos 和其他的媒体标签设置样式的，而不是给背景图片设置样式。

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

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