CSS object-fit 属性值

CSS object-fit 属性值

CSS object-fit 属性值是一个比较新的 CSS 属性，它用于调整图像或视频元素的尺寸和比例，让它们更好地适应父容器。object-fit 属性可以让开发者指定一个尺寸适合于父容器的图片或视频元素，并且可以选择如何对其进行缩放或裁剪。

1. 语法

这里给出 object-fit 属性的语法：

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

* fill：默认值，将元素的内容拉伸以适应元素的垂直和水平尺寸。

* contain：将内容缩放或拉伸，以适应元素的尺寸，保持其宽高比，并且内容可能会有空白部分。

* cover：将内容缩放或拉伸，以填充整个元素，保持其宽高比，可能会发生内容重叠。

* none：元素将保持其原始尺寸，不会调整其大小，超过元素的内容将被切割掉。

* scale-down：元素的内容将缩小，以适应元素或其容器的大小。

2. fill

fill是 object-fit 属性的默认值，它会将元素的内容拉伸以适应元素的垂直和水平尺寸。如果父容器与图像或视频元素的宽高比不同，那么元素的内容将会被拉伸或压缩，以适应父容器的大小。

例如：

img {

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

在这个例子中，图像被设置为 fill 值。由于指定了 width 和 height 的值，它将填充元素并拉伸图像，以适应元素的尺寸：

3. contain

通过将元素的内容缩放或拉伸，以适应元素的尺寸并保持其宽高比，contain 值会尝试显示完整的图片或视频。该模式可能会产生上下或左右空白边界，这取决于父容器的宽高比与内容的宽高比之间的关系。

例如：

img {

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

在这个例子中，图像被设置为 contain 值。由于指定了 width 和 height 的值，它将适应元素的尺寸并将其缩放到保持其宽高比的范围内：

4. cover

cover 值将通过缩放或拉伸内容来填充整个元素，并且保持其宽高比。这种方式可能会导致内容的重叠，适用于需要将完整的内容放入父容器，而不关心内容是否被裁剪，并且需要将图片或视频等比例缩放到适应父容器。

例如：

img {

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

在这个例子中，图像被设置为 cover 值。由于指定了 width 和 height 的值，它将适应元素的尺寸并将其缩放到保持其宽高比的范围内：

5. none

none 值使元素保持其原始尺寸，不会缩放或裁剪其内容。如果元素的大小小于其内容，则超出元素的内容将被裁剪。

例如：

img {

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

在这个例子中，图像被设置为 none 值。由于指定了 width 和 height 的值，元素将保持其原始尺寸，无论它们与父容器的尺寸如何：

6. scale-down

scale-down 值是包含和 none 值的混合。如果元素的内容比其容器小，则 scale-down 值与 contain 值相同。

例如：

img {

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

在这个例子中，图像被设置为 scale-down 值。由于元素的内容较小，元素将按比例缩小，直到适应元素或其容器的大小：

7. 总结

object-fit 属性值提供了简便的方式来控制图片或视频的大小和比例，以适应其容器。fill 值可以使内容填满容器，contain 值可以将整个内容缩放到容器中并保持比例，cover 值可以将内容扩展到整个容器，但可能会有内容重叠。none 值可以保持内容的原始大小，而 scale-down 值则是包含和 none 值的混合。选择正确的 object-fit 属性值将有助于使网站看起来更美观。