css背景图片实现object-fit的效果

 

object-fit是一个用于控制替换元素（如<img>或<video>）内容在其容器内布局和缩放的CSS属性。

它的作用是调整替换元素的尺寸和位置，使其适应容器，并保持其纵横比例。

然而，object-fit属性本身并不直接适用于背景图片。如果你想在背景图片上应用object-fit效果，可以使用background-size属性来达到类似的效果。

 

以下是一些使用background-size属性来实现object-fit效果的例子：

Cover效果：

.container {
  width: 300px;
  height: 200px;
  background-image: url('your-image-url.jpg');
  background-size: cover;
  background-position: center;
}

这将使背景图片在容器中完全覆盖，并保持纵横比例，同时确保图片的中心位置位于容器的中心。

Contain效果：