CSS object-fit属性介绍

简介

CSS的object-fit属性用于指定一个可替换元素（比如img、video、svg等）在其容器或父元素中的尺寸和宽高比是否保持原样以及如何调整。这个属性的主要作用是让图片或视频自适应于其容器，使得不同尺寸的文件可以自动适应于同一个容器中，避免了对图片或视频进行手动缩放或者使用脚本。

语法

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

object-fit属性接受以下值：

• fill: 将图片或视频完全拉伸以填满容器，可能会导致图片变形失真。
• contain: 使图片或视频填满较小容器，但不改变其宽高比，并保留其原始大小。
• cover: 使图片或视频最小的覆盖整个容器，拉伸铺满整个容器并裁剪多余部分。
• none: 保持图片或视频的尺寸和宽高比，不缩放。
• scale-down: 当对象比容器小的时候，scale-down属性的行为就像 contain，而当对象比容器大的时候就像 none。

示例

下面来看一个例子，假如我们有一个用于显示图片的<img>元素，它的尺寸大小可能会比其容器要大或要小，使用object-fit就可以让图片自适应容器，并保留其宽高比。首先，我们需要给图片定个宽高：

img {
  width: 400px;
  height: 300px;
}

接着，使用object-fit属性和cover值：

img {
  width: 400px;
  height: 300px;
  object-fit: cover;
}

这样，当图片比容器大时，会自动进行裁剪。当图片比容器小时，会拉伸以填满整个容器。

总结

在设计网站时，良好的UI体验是至关重要的。CSS object-fit属性提供了一种简单的方法来帮助我们达到这一目的。当我们要将图片或视频自适应于其容器时，它是非常有用的。使用object-fit，可以轻松地调整图片或视频的大小和位置，而不会改变其宽高比或导致变形失真。