头部banner在手机端显示不完整、图片异常，如何实现水平方向正常显示？

问题根因 #

你当前的Banner显示异常是两个原因共同导致的：

• 固定了.imgbanner的高度为200px，而原图的宽高比为1024:312≈3.28:1，当移动端屏幕宽度小于200*3.28≈656px时，background-size: cover会优先保证覆盖整个容器，自动裁剪背景图左右两侧的内容
• 没有显式设置容器宽度为100%，仅设置max-width:100%在部分场景下可能无法撑满父容器

适配方案 #

推荐你用「保持原图宽高比」的方案，既不会裁剪图片内容，也能自适应所有屏幕宽度：

修改后的CSS代码 #

.imgbanner{
    /* 移除固定高度，改用宽高比和原图保持一致 */
    aspect-ratio: 1024 / 312;
    /* 显式设置宽度撑满父容器 */
    width: 100%;
    margin-top: -70px;
    /* 保证整张图完整显示，不会被裁剪 */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('https://i.sstatic.net/U0YP4.png');
}

HTML代码无需修改 #

<div class="imgbanner">
</div>

注：aspect-ratio属性兼容iOS 15+、Android Chrome 85+，覆盖绝大多数主流移动端设备，如果需要兼容更低版本的老旧设备，可以用padding-top的传统方案实现固定宽高比，代码如下：

.imgbanner{
    height: 0;
    /* padding-top值为 高度/宽度*100% = 312/1024*100% ≈30.47% */
    padding-top: 30.47%;
    width: 100%;
    margin-top: -70px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('https://i.sstatic.net/U0YP4.png');
}

如果你的业务场景必须固定Banner高度为200px，可以接受上下有少量留白的话，仅需要在原有代码基础上新增background-repeat: no-repeat、修改background-size属性为contain即可。

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