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

縮放圖像以適合邊界框

僅使用 CSS 在邊界框中按比例縮放圖像似乎是一項簡單的任務。然而，當期望的結果是放大影像直到完全填充邊界框的一維時，這種方法就不夠了。

純 CSS 解

幸運的是， CSS3 為這個困境提供了一個解決方案。透過利用background-image和background-size屬性，您可以根據需要縮放邊界框中的映像。

實作

要實現此解決方案，請依照下列步驟操作：

1. 建立邊界框：將影像包含在將用作邊界框的HTML 元素內。
2. 設定背景影像： 將影像定義為邊界框的背景影像。
3. 啟用背景包含： 指定背景大小：包含以確保影像縮放以適合邊界框，同時保持其縱橫比。

範例

<code class="html"><div class="bounding-box">
  <!-- Image as background-image -->
</div></code>

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

其他注意事項

其他注意事項
其他注意事項
其他注意事項

<code class="css">.bounding-box {
  position: absolute;
  background-position: center;
}</code>

經CanIUse.com 確認，此解決方案與現代瀏覽器相容。 讓影像居中：要將影像在邊界框內居中，請使用下列CSS：透過採用這些CSS 技術，您可以有效地縮放影像以填充邊界框，同時保持其原始比例。

以上是如何縮放圖像以適應 CSS 中的邊界框，同時保持其縱橫比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！