如何在 CSS 中缩放图像以填充边界框，同时保留宽高比？-css教程-PHP中文网

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

Barbara Streisand

发布： 2024-10-27 04:26:29

原创

916 人浏览过

How to Scale an Image to Fill a Bounding Box While Preserving Aspect Ratio in 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中文网其他相关文章！