如何建立響應式縮放的 CSS 背景圖片而不出現裁切或對齊問題？

按比例縮放的響應式CSS 背景圖像

CSS 中的背景圖像通常很難使用，特別是當您希望它們響應式縮放以適應不同的螢幕尺寸時並保持正確的縱橫比。讓我們探討一下如何使用background-size屬性來實現這種效果。

問題：裁剪和對齊問題

當使用background: url()指定背景圖片時，您可能會遇到以下相關問題裁剪和對齊。 Firefox 可能會優先考慮高度縮放，從而導致垂直裁剪，而 Chrome 可能會將圖像居中而不是重複。

解決方案：background-size: cover

要解決這些問題，我們可以使用背景尺寸屬性與封面相結合值：

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

相容性：
在此處檢查背景大小屬性的兼容性：[CSS技巧](https://css-tricks.com/css3- background-size/)

解釋包含和覆蓋

覆蓋值將背景圖像縮放到完全覆蓋背景定位區域的最小尺寸，保持其縱橫比。這可確保影像填滿整個空間，沒有任何空白或裁切區域。

相反，包含值將影像縮放到適合背景定位區域的最大尺寸，同時保留其縱橫比。這可能會導致影像周圍出現空白區域。

視覺演示

考慮將 4x3 影像用作 16x9 螢幕的背景。

包含：

• 影像適合螢幕內部，無需裁剪，但有其上方和下方的空白區域。

封面：

• 影像被縮放以垂直覆蓋整個螢幕，同時裁剪掉兩側.

有關更詳細的演示，請查看此程式碼剪斷：

<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 div.</p>
</div>

以上是如何建立響應式縮放的 CSS 背景圖片而不出現裁切或對齊問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！