在 CSS 中設定可縮放背景圖片時如何保持寬高比？

可縮放背景圖像：保持寬高比

在網頁設計中，設定無縫適合頁面尺寸的背景圖像可以是棘手的任務。通常，開發人員會遇到影像被不成比例地拉伸或裁剪的問題，從而導致不良結果。然而，CSS3 透過background-size 屬性為這種困境提供了一個優雅的解決方案。

background-size 屬性可讓您以各種方式指定背景圖片的大小。若要保持影像的縱橫比，同時確保其適合身體元素的尺寸，請使用 cover 值。

將背景大小設為 cover，影像將自動縮放到完全可容納的最小尺寸。覆蓋背景定位區域。這意味著圖像將始終填充頁面的整個寬度，同時其高度會調整以保持原始比例。

例如，考慮以下程式碼：

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

此CSS 將確保background.svg影像適合頁面的整個寬度，同時其高度相應地縮放以保持其比例

理解Contain 與Cover

在CSS3中，background-size 屬性有兩個主要值：contain 和 cover。雖然這兩個值都保持影像的縱橫比，但它們的行為不同。

• 包含：將影像縮放到完全適合背景定位區域的最大可能尺寸。這意味著影像外部的某些區域可能會留空。
• 覆蓋：將影像縮放到完全覆蓋背景定位區域的最小可能尺寸。這可能會導致影像的某些區域被裁剪掉。

視覺化包含和覆蓋之間差異的一個有用方法是想像一個代表螢幕的矩形和一個代表圖像的矩形。

• 包含：影像矩形將適合螢幕矩形，可能會在其周圍留下空白空間。
• 覆蓋：影像矩形將擴展以填滿螢幕矩形，可能會切掉部分影像。

以上是在 CSS 中設定可縮放背景圖片時如何保持寬高比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！