移动端背景图显示被截断问题求助（附页面链接及CSS代码）

问题分析 #

你当前的CSS代码存在几个引发背景图截断的问题：

1. .c-content-media-2中的width:100% auto和height:100% auto是无效CSS语法，width、height属性不能同时指定百分比与auto值，浏览器会忽略该写法，导致容器尺寸计算异常。
2. background-size:100% auto会让背景图宽度铺满容器，但高度按比例缩放，若移动设备上容器高度小于背景图缩放后的高度，就会出现底部截断；若容器过高，背景图高度不足则会留白。

修复方案 #

根据需求选择以下任一方案：

方案1：保证背景图完整显示（允许容器留白）

修改.c-content-media-2的CSS，替换无效尺寸写法并调整背景图适配规则：

.c-content-media-2{
    background-position: top!important;
    background-size: contain; /* 完整显示背景图，容器可能出现留白 */
    background-repeat: no-repeat;
    width: 100%; /* 修正无效写法 */
    min-height: 200px; /* 设置最小高度，避免容器高度坍塌 */
}

方案2：背景图铺满容器（允许裁剪边缘）

若希望背景图完全覆盖容器，可改用cover属性，同时调整定位保留核心区域：

.c-content-media-2{
    background-position: center!important; /* 居中定位，裁剪时保留核心视觉部分 */
    background-size: cover; /* 铺满容器，超出部分自动裁剪 */
    background-repeat: no-repeat;
    width: 100%;
    min-height: 300px; /* 根据实际需求调整高度 */
}

方案3：仅针对移动设备单独适配

如果需要保留桌面端效果，仅修复移动端问题，添加媒体查询：

.c-content-media-2{
    background-position: top!important;
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 100%;
    height: auto; /* 修正无效写法 */
}

/* 移动端专属适配规则 */
@media (max-width: 767px) {
    .c-content-media-2{
        background-size: cover;
        background-position: center;
        min-height: 250px;
    }
}

额外提示 #

• 确保.c-content-media-2的父容器有明确高度或最小高度，避免容器高度坍塌导致背景图无法正常显示。
• 测试不同移动设备的显示效果，根据背景图核心内容调整background-position，优先保留关键视觉区域。

内容的提问来源于stack exchange，提问作者Dil Dilshan