如何在 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中文網其他相關文章！