CSS3 object-fit 图像裁剪

MDN定义

https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

该 object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。简单的说是处理替换元素（replaced elements）的自适应问题，简单的说就是处理替换元素的变形（这里指长宽比例变形）；

可替换元素

http://openwares.net/internet/css_replaced_element.html

其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比如,img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

`object-fit 语法`

fill：默认值。填充，可替换元素填满整个内容区域，可能会改变长宽比，导致拉伸。
contain：包含，保持原始的尺寸比例，保证可替换元素完整显示，宽度或高度至少有一个和内容区域的宽度或高度一致，部分内容会空白。
cover：覆盖，保持原始的尺寸比例，保证内容区域被填满。因此，可替换元素可能会被切掉一部分，从而不能完整展示。
none：保持可替换元素原尺寸和比例。
scale-down：等比缩小。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .box{
 8             position:relative;
 9             float:left;
10             margin:0 10px 40px 10px;
11             width:150px;
12             height:150px;
13         }
14         .box>img{
15             width:100%;
16             height:100%;
17             background-color:#000;
18         }
19         .fill{
20             object-fit:fill;
21         }
22         .contain{
23             object-fit:contain;
24         }
25         .cover{
26             object-fit:cover;
27         }
28         .none{
29             object-fit:none;
30         }
31         .scale{
32             object-fit:scale-down;
33         }
34         p{
35             text-align: center;
36         }
37     </style>
38 </head>
39 <body>
40 
41 <div class="box">
42     <img src="img/21.jpg" class="fill" alt="替换内容拉伸填满整个content box, 不保证保持原有的比例。">
43    <p>拉伸</p>
44 </div>
45 <div class="box">
46     <img src="img/21.jpg" class="contain" alt="保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下,会留白">
47     <p>保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下,会留白</p>
48 </div>
49 <div class="box">
50     <img src="img/21.jpg" class="cover" alt="保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，会裁剪，默认显示居中">
51     <p>保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，会裁剪，默认显示居中</p>
52 </div>
53 <div class="box">
54     <img src="img/21.jpg" class="none" alt="保持原有尺寸比例。同时保持替换内容原始尺寸大小">
55     <p>保持原有尺寸比例。同时保持替换内容原始尺寸大小</p>
56 </div>
57 <div class="box">
58     <img src="img/21.jpg" class="scale" alt="依次设置了none或contain, 最终呈现的是尺寸比较小的那个">
59     <p>依次设置了none或contain, 最终呈现的是尺寸比较小的那个</p>
60 </div>
61 </body>
62 </html>

object-fit和object-position之间的关系有点类似于background-size和background-position，无论是，关系还是属性值，都有相似之处，因此，我们在理解object-fit和object-position的时候，可以或多或少映射background-size和background-position；

场景

类似与微信个人相册

现代web显示环境万变，响应式布局(适配移动端)、半响应布局(宽窄屏适配)以及传统流体布局（任意宽度水平自适应）都比较常见，结果，在处理这些有着固定尺寸的元素的时候，就会遇到障碍，这个Object-fit 天生外挂剪裁功能，比之前的

1. 外部尺寸容器overflow:hidden限制，里面<img>或position或margin定位,但这种方法需要2层标签，麻烦。
2. clip实现img sprites效果，但是<img>元素必须position:absolute， 麻烦。

代码简节很多，而且兼容性好（IE 不兼容）