您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

CSS 背景圖自適應填滿 DIV：background-size: cover 完美解決

編輯：程式設計疑難解答

問題

`width:100%; height:100%` 的 `
` 設背景圖。
用 `background-size: auto` 兩側留白；`repeat` 平鋪難看。
螢幕解析度變化、瀏覽器 resize 時需始終填滿不變形。

核心屬性：`background-size: cover`

.myDiv {
    width: 100%;
    height: 100vh; /* 或具體高度，百分比需父元素有高度 */
    background: url(bg.jpg) no-repeat center center;
    background-size: cover; /* 關鍵：縮放填滿，保持比例，允許裁切 */
}

關鍵點解析

屬性	作用
background-size: cover	圖片縮放至完全覆蓋容器，寬高比不變，超出部分裁切
background-position: center	圖片居中，裁切時保留中心區域
background-repeat: no-repeat	禁止平鋪
height: 100vh	視口高度，確保容器有高度（百分比高度需父鏈路皆有高度）

對比：`contain` vs `cover`

`contain`：完整顯示圖片，**可能留白**（適合產品展示圖）。
`cover`：填滿容器，**可能裁切**（適合氛圍背景圖）。

進階：響應式多圖適配

@media (max-width: 768px) {
    .myDiv { background-image: url(bg-mobile.jpg); }
}
@media (min-width: 1920px) {
    .myDiv { background-image: url(bg-4k.jpg); }
}

或用 `` + `image-set()`（現代瀏覽器支援）。