示例

img或video等替换元素的内容如何适应其容器-案例_缩放

1. object-contain

  • 功能：保持图片的宽高比，确保图片完整显示在容器内，可能会在容器内留白。
  • 适用场景：当需要完整显示图片且不裁剪时使用。
img{
  object-fit: contain;
}
  • 1.
  • 2.
  • 3.

2. object-cover

  • 功能：保持图片的宽高比，确保图片覆盖整个容器，可能会裁剪图片。
  • 适用场景：当需要图片填满容器且可以接受裁剪时使用。
img{
  object-fit: cover;
}
  • 1.
  • 2.
  • 3.

3. object-fill

  • 功能：拉伸图片以填满整个容器，不保持宽高比。
  • 适用场景：当需要图片完全填满容器且不关心宽高比时使用。
img{
  object-fit: fill;
}
  • 1.
  • 2.
  • 3.

4. object-none

  • 功能：保持图片的原始尺寸，不进行任何缩放或裁剪。
  • 适用场景：当需要显示图片的原始尺寸时使用。
img{
  object-fit: none;
}
  • 1.
  • 2.
  • 3.

5. object-scale-down

  • 功能：在 object-contain 和 object-none 之间选择较小的尺寸，确保图片完整显示且不放大。
  • 适用场景：当需要图片完整显示且不放大时使用。
img{
  object-fit: scale-down;
}
  • 1.
  • 2.
  • 3.

6. object-position

  • 功能：与 object-fit 配合使用，控制图片在容器中的位置。
  • 适用场景：当需要调整图片在容器中的对齐方式时使用。
img{
  object-fit: cover;
  object-position: center top; /* 图片顶部居中 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • object-fit 控制图片如何适应容器，常用值包括 contain、cover、fill、none 和 scale-down。
  • object-position 控制图片在容器中的位置，通常与 object-fit 配合使用。
  • 根据需求选择合适的 object-fit 值，可以实现图片的自适应显示效果。