如何縮放圖像以適應 CSS 中的邊界框，同時保持其縱橫比？-css教學-PHP中文網

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

Susan Sarandon

發布： 2024-11-03 02:44:02

原創

1008 人瀏覽過

How can I scale an image to fit a bounding box in CSS while maintaining its aspect ratio?

縮放圖像以適合邊界框

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

純 CSS 解

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

實作

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

範例

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