如何实现div背景图在移动端适配时左右等比裁剪以居中显示核心内容

解决方案 #

你出现变形的核心原因是媒体查询中设置的background-size: 100vw 100vh强制拉伸了背景图的宽高，破坏了原图比例。要实现左右等比裁剪、核心内容居中的效果，按如下修改代码即可，无需单独写媒体查询，桌面、移动端可共用：

.top {
    background-image: url("./images/desktop/image-header.jpg");
    background-repeat: no-repeat;
    /* 锚定背景图水平、垂直都居中 */
    background-position: center center;
    /* 背景图高度固定为100vh，宽度按原图比例自适应，超出部分自动裁剪 */
    background-size: auto 100vh;
    /* 也可替换为background-size: cover，会自动适配保证覆盖整个容器，可根据实际显示效果二选一 */
    min-height: 100vh;
}

如果你一定要保留媒体查询区分配置，把移动端媒体查询内的代码替换为上述内容即可，原有background-attachment: fixed如果没有滚动固定背景的特殊需求可以直接删除，该属性在部分移动端浏览器存在兼容性问题，反而会影响显示效果。

参数说明 #

• background-position: center center：指定背景图的对齐基准为容器中心，裁剪时会优先保留中心区域，多余部分从上下左右均匀裁剪
• background-size: auto 100vh：仅固定背景图高度和容器高度一致，宽度保留原比例自动计算，宽度超出容器时会自动从左右两侧等距裁剪，完全不会出现拉伸变形

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