掌握 object-fit: cover;属性，让图片在固定宽高的 div 中完美显示

文章目录[隐藏]

如上图，添加了红色标注，对比了添加和未添加属性的图片。图片全部嵌套在一个固定宽高的div中，图片宽高均为100%。没有添加object-fit: cover;属性的图片会被挤压，而添加了object-fit: cover;属性的图片不会被挤压，会居中显示，多余的部分会被裁剪掉。

案件

比如我们要设置img的宽度为100像素，高度为200像素，那么如果图片比较大的话，肯定会显示不完整。

img{
  width: 100px;
  height: 200px;
  object-fit: cover;
}

该属性会保留图片的原始比例，超出的部分会被裁剪，添加该属性会让图片适应指定容器的高宽。

一般用于 img 和 video 标签，这些元素可以被剪切、缩放或直接拉伸，同时保留其原始比例。

适当的价值

initial：设置为默认值

fill：默认情况下，不保证保持原有的比例，内容会拉伸以填满整个内容容器。

contain：保持原有尺寸比例。内容被缩放。

封面：保持原尺寸比例，但可能会裁减部分内容。

none：保留元素内容原有的长宽，即不会重新设置内容。

scale-down：保持原始尺寸比例。内容的大小与 none 或 contain 中的一个相同，取决​​于两者中哪个获得较小的对象尺寸。

inherit：从元素的父元素继承属性。