如何使用 CSS 縮放圖像以適應邊界框，同時保持其縱橫比？

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

在影像大於其容器的情況下，CSS 使用max 提供了一個簡單的解決方案-width 和max-height 屬性。然而，當目標是放大圖像直到其某個尺寸填滿整個容器時，這種方法就不夠了。

CSS3 解

感謝CSS3，有一個可行的解決方案，利用background-image和background-size屬性：

1. HTML:

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

   登入後複製

2. CSS:

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

   登入後複製

對齊和相容性

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