如何在 CSS 中缩放图像以填充边界框，同时保留宽高比？

缩放图像以填充边界框并保持纵横比

缩放图像以适合边界框，同时保持其纵横比可以对 CSS 提出挑战。

考虑以下用例：

• 用例 1： 图像大于容器。
• 用例 2： 图像小于容器（缩小）。
• 用例 3： 图像小于容器（放大）。

标准 CSS 属性 max-width 和 max-height 仅在图像大于容器时才起作用（用例 1 和 2）。

幸运的是，CSS3 为用例 3 提供了解决方案。通过设置将图像作为背景图像并使用带有包含值的背景大小属性，图像可以放大以填充容器而不扭曲其纵横比。

HTML:

<div class='bounding-box'>
</div>

CSS：

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

将图像在容器内居中：

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

此解决方案与大多数现代浏览器兼容。

以上是如何在 CSS 中缩放图像以填充边界框，同时保留宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！