CSS 背景圖自適應容器寬高並始終完整顯示：響應式方案與 IE8 兼容

核心需求

背景圖隨容器尺寸變化自動縮放，始終完整顯示（不裁剪、不變形、不留白），即 background-size: contain 效果。

現代瀏覽器方案（IE9+、所有現代瀏覽器）

.bg-container {
    width: 100%;
    height: 300px;          /* 或任意高度 */
    background-image: url('image.jpg');
    background-size: contain;  /* 關鍵：縮放至完全包含 */
    background-repeat: no-repeat;
    background-position: center; /* 居中顯示 */
}

IE8 及以下兼容方案

IE8 不支持 background-size，需用 <img> 模擬：

<div class="legacy-bg">
    <img src="image.jpg" alt="" />
    <div class="content">前景內容</div>
</div>

<style>
.legacy-bg {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden; /* 防止圖片撐大容器 */
}
.legacy-bg img {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* IE8 不支持，但可用 JS 計算縮放 */
    z-index: -1; /* 置於內容之下 */
}
.legacy-bg .content {
    position: relative;
    z-index: 1;
}
</style>

IE8 純 CSS 近似方案（利用 AlphaImageLoader 濾鏡）

.ie8-bg {
    /* 僅 IE8 生效 */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='image.jpg', sizingMethod='scale');
    /* sizingMethod: crop|scale|image
       scale = 縮放填滿（會變形），image = 原始大小，crop = 裁剪
       無原生 contain 等效模式，需 JS 輔助 */
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale')";
}

建議：IE8 份額極低，優雅降級（顯示原圖或居中裁剪）優於複雜 Hack。

進階：背景圖填滿容器（cover 模式）對比

最佳實踐總結

1. 優先用 background-size: contain + center + no-repeat
2. 容器需有明確高度（或 aspect-ratio 保持比例）
3. 圖片優化：WebP 格式、適當壓縮、CDN 加速
4. IE8 兼容：條件註釋引入獨立 CSS 或 JS Polyfill，不污染主樣式