详解CSS3中的object-fit属性解决图片压缩变形

以前在写前端页面的时候，经常遇到在给图片设置固定宽高的时候，不同尺寸的图片就回压缩变形，要让图片自动适应宽高的话，往往是使用设置为背景图片的方式来实现，并不是很方便。

后来接触到 object-fit 属性，才解决了这个问题。

在介绍之前，首先要了解一个概念：替换元素。 object-fit和后面会介绍的object-position 都只针对替换元素有效。

替换元素：浏览器根据其标签的元素与属性来判断显示具体的内容，比如img,iframe,input,textarea,select,object，video等,这些元素都没有实际的内容。

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

object-fit ：fill | contain | cover | none | scale-down；

各个属性的具体释义如下：

fill 中文释义“填充”，默认值。替换的内容正好填充元素的内容宽，替换内容拉伸填满整个content box，不保证保持原有的比例。
contain 中文释义“包含”。保持原有的尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能在容器内一下空白。
cover 中文释义“覆盖”。保持原有的尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容部分区域不可见。
none 中文释义“无”。保持原有的尺寸比例。同时保持替换内容原始尺寸大小。
scale-down 中文释义“降低”。内容的尺寸与none或contain中的一个相同，取决于它们之间谁得到的对象尺寸会更小。

例子：

原图片，尺寸300px*168px

容器的尺寸是400px * 300px, 测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Object-fit 属性示例</title>
    <style>
        #object-fit.container li{display: block;margin:20px 0; position: relative;}
        #object-fit .box { width: 400px; height: 300px; margin: 10px 20px; background-color: #c6edff; overflow: hidden; resize: both;}
        #object-fit .box>img{width: 100%;height: 100%;}
        .fill{object-fit: fill;}
        .contain{object-fit: contain;}
        .cover{object-fit: cover;}
        .none{object-fit: none;}
        .scale-down{object-fit: scale-down;}
        .attribute{ position: absolute;left:0;right:0;top:0;bottom:0;display: flex;justify-content: center;align-items: center; }
        .attribute span{display: inline-block;padding:14px 20px;border-radius: 8px; font-size:18px;color:#303030;font-weight: bold; text-align: center;background: rgba(255,255,255,0.75);}
    </style>
</head>

<body>
<div class="container" id="object-fit">
    <ul>
        <li class="box"><img src="http://ricocc.com/wordpress/wp-content/uploads/2020/02/photo-1575196115220-ae4e396ec03f-300x169.jpg" alt="" class="fill"> 
            <div class="attribute">  <span> object-fit: fill </span> </div> </li>
        <li class="box"><img src="http://ricocc.com/wordpress/wp-content/uploads/2020/02/photo-1575196115220-ae4e396ec03f-300x169.jpg" alt="" class="contain">  <div class="attribute">  <span> object-fit: contain </span> </li>
        <li class="box"><img src="http://ricocc.com/wordpress/wp-content/uploads/2020/02/photo-1575196115220-ae4e396ec03f-300x169.jpg" alt="" class="cover">  <div class="attribute">  <span> object-fit: cover </span> </li>
        <li class="box"><img src="http://ricocc.com/wordpress/wp-content/uploads/2020/02/photo-1575196115220-ae4e396ec03f-300x169.jpg" alt="" class="none">   <div class="attribute">  <span> object-fit: none </span></li>
        <li class="box"><img src="http://ricocc.com/wordpress/wp-content/uploads/2020/02/photo-1575196115220-ae4e396ec03f-300x169.jpg" alt="" class="scale-down">  <div class="attribute">  <span> object-fit: scale-down</span> </li>
        
    </ul>
</div>
</body>
</html>

展示效果：

object-fit: fill
object-fit: contain
object-fit: cover
object-fit: none
object-fit: scale-down

object-fit 使用上面会更加便利，唯一限制的便是它的兼容性还不算好，目前 IE 并不支持，目前也有现成的兼容性解决方案，能支持到 IE 9+，这里就不多做介绍了，github 链接附上：polyfill 。有兴趣的可以自己了解一下。

顺便扩展一下属性 object-position ，其主要作用是控制替换内容的位置。

语法 object-position ： x轴距离 y轴距离；

有点类似background-position / background-size，它的默认值是50% 50%，效果就是居中。使用起来还是比较简单的。