CSS HTML 背景圖自適應不變形解決方案集錦

問題現象

UI 設計背景圖直接設置 width:100%; height:100% 導致拉伸變形。

核心解決方案

方案一：background-size: cover（推薦）

.bg-container {
    width: 100%;
    height: 100vh;  /* 或固定高度 */
    background: url(bg.jpg) center/cover no-repeat;
}

保持比例縮放填滿容器，可能裁剪邊緣。

方案二：background-size: contain

background-size: contain;  /* 完整顯示，可能留白 */

方案三：img 標籤 + object-fit

<img src="bg.jpg" class="bg-img">
.bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* cover/contain/fill/scale-down */
}

方案四：偽元素鋪滿（不影響文檔流）

.container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(bg.jpg) center/cover;
    z-index: -1;
}

響應式建議

• 多備幾張不同比例圖片，配合 @media 切換
• 關鍵內容區域避開圖片邊緣（安全區設計）
• 使用 WebP/AVIF 格式減小體積

參考資源

• CSS 背景圖自適應完整指南
• 背景圖填滿不變形實戰