如何使 CSS 背景圖像適合寬度並按比例自動縮放高度？

CSS 背景圖片適合寬度、高度按比例自動縮放

問題

CSS 中，設定背景圖片寬度保持影像的比例可能會帶來挑戰，特別是在垂直裁剪和影像方面

解決方案：background-size: cover

CSS3提供了background-size屬性，可以控制影像的大小。透過設定background-size: cover，您可以將影像縮放到完全覆蓋背景定位區域的最小尺寸，同時保持寬高比。

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

此設定可確保背景圖像覆蓋頁面的寬度，並且其高度會相應縮放，從而實現所需的響應能力和裁剪行為。

contain 和 cover 的比較

background-size 屬性提供兩個附加價值，contain 和cover，它們提供不同的縮放行為：

• contain：確保圖像適合背景定位區域而不裁剪，從而導致空白空間可見
• cover：確保影像覆蓋整個背景定位區域，從而可能將影像裁切為適合。

視覺比較

考慮下圖顯示在邊框內。 contains 確保圖像在框中完全可見，而cover 用圖像填充框，從而導致底部裁剪：

[具有包含和封面背景大小設置的圖像圖像]

現場演示

以下程式碼示範了contain和cover的差異：

<div><div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully contained.</p>
</div>
<div><div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image covers all of the <code><div></code>.</p>
</div>

以上是如何使 CSS 背景圖像適合寬度並按比例自動縮放高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！