如何僅使用 CSS 縮放圖片以適合邊界框？

僅使用 CSS 縮放圖像以適合邊界框

實現保持寬高比的動態圖像縮放效果可能具有挑戰性。然而，使用 CSS3 技術，我們可以解決這個問題，並縮放圖像以適應邊界框。

CSS 的傳統方法是使用 max-width 和 max-height 屬性，它們會縮小影像以適應邊界框在指定的容器內。然而，當放大影像時，這些屬性就不夠了。

CSS3解決方案

CSS3透過background-image和background-size屬性提供了解決方案。透過將圖像設定為容器的背景並使用 background-size: contains，我們可以強制圖像縮放，直到尺寸達到邊界框的完整寬度或高度。

HTML

<code class="html"><div class='bounding-box'></div></code>

CSS

<code class="css">.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}</code>

此解決方案受最新瀏覽器支援。 CanIUse 提供了詳細的相容性表。

要將圖片在邊界框內置中，可以使用 CSS 的變體：

<code class="css">.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}</code>

以上是如何僅使用 CSS 縮放圖片以適合邊界框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！