文章目录[隐藏]
如上图，添加了红色标注，对比了添加和未添加属性的图片。图片全部嵌套在一个固定宽高的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：从元素的父元素继承属性。
文章版权声明：除非注明，否则均为论主机评测网原创文章，转载或复制请以超链接形式并注明出处。