CSS object-fit 属性 和 object-position 属性

CSS object-fit 属性用于设置元素的内容应该如何适应元素本身的高度和宽度，CSS object-position 属性用于设置元素的内容在元素内容框中的位置。这两个属性主要用于 img 和 video 元素，使图片或视频按照我们想要的方式展示。

object-fit

我们常见的一种情况，如果我们设定的 <img> 元素的高宽比例与图片文件本身的高宽比例不相同，就会出现图片显示变形的情况。为了避免这种状况，我们可以使用 object-fit 属性设置内容的填充方式。

object-fit 属性的可选值包括：

• fill - 默认值。图片填充满整个区域，比例不符的话会导致图片被拉伸或者挤压变形
• contain - 图片保持宽高比例并完全包含在元素的内部。如果图片和元素的高宽比例不一致，就会导致元素的两边没有图片覆盖，就像有些视频的黑边一样。。
• cover- 图片保持宽高比例缩放直到一边完全放进元素内部。如果图片和元素的高宽比例不一致，就会导致部分图片看不到。
• none - 图片保持原有尺寸
• scale-down- 图片缩小到最小版本 none 或 contain

通过以下的几个实例可以体会出差别。

cover

如果我们使用 object-fit: cover;，图片保持宽高比例缩放直到一边完全放进元素内部。如果图片和元素的高宽比例不一致，就会导致部分图片看不到。

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

contain

如果我们使用 object-fit: contain;，图片保持宽高比例并完全包含在元素的内部。如果图片和元素的高宽比例不一致，就会导致两边没有图片覆盖，就像有些视频的黑边一样。

img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}

fill

如果我们使用 object-fit: fill;，图片填充满整个区域，比例不符的话会导致图片被拉伸或者挤压变形。

img {
  width: 200px;
  height: 300px;
  object-fit: fill;
}

none

如果我们使用 object-fit: none;，不会调整图片的大小。

img {
  width: 200px;
  height: 300px;
  object-fit: none;
}

scale-down

如果我们使用 object-fit: scale-down; 图片缩小到最小版本 none 或 contain：

img {
  width: 200px;
  height: 300px;
  object-fit: scale-down;
}

object-position

CSS object-position 属性用于设置元素的内容在元素内容框中的位置，主要用于 img 和 video 元素。

object-position 属性使用 1 到 2 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。指定的位置允许定位到内容框外部。

我们接着看 object-position: cover; 中的例子，由于 cover 截取的适合图片中间的部分，而埃菲尔铁塔并不处于图片的中间，如果我们想让埃菲尔铁塔居中显示，这个时候就用到 object-position 了。

居中的埃菲尔铁搭：

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 80% 100%;
}

CSS 相关属性

下表列出了相关属性：