图片处理

object-fit:cover

图片变形处理，设置属性object-fit：cover

给父级设置最小宽度，往里面添加图片，在图片填满浏览器宽度时，运用object-fit：cover，在浏览器窗口缩放至75%、50%甚至更小比例时，当他的高度随之变小，宽度跟随浏览器窗口两侧随之拉伸，图片不会偏左偏右也不会被压缩，只有两边会被拉伸，对图片主要部分没有任何影响。

css3中background-size出现较早，除了数值外还支持关键字，例如：cover、contain等。

object-fit也类似，但还是有差异。具体有五个值：

1. object-fit：fill；
2. object-fit：contain；
3. object-fit：cover；
4. object-fit：none；
5. object-fit：scale-down；

 

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

可以通过使用object-postion属性来切换被替换元素的内容对象在元素框内的对齐方式。

 

来源：https://www.runoob.com/cssref/pr-object-fit.html