移动端background-image: cover属性失效问题求助

嘿，我来帮你搞定这个移动端背景图变形的问题！你遇到的情况其实很常见——background-attachment: fixed在移动端的渲染逻辑和PC端不一样，这就是导致图片变形的核心原因。

问题分析 #

PC端用background-size: cover配合background-attachment: fixed时，浏览器会让背景图覆盖整个视口，按比例裁剪多余部分；但到了移动端，fixed属性会让背景图的尺寸计算基于整个文档（而不是当前视口），再加上移动端视口高度较小，浏览器可能会强制显示完整图片，导致拉伸变形。

方案一：修复背景属性的兼容性 #

通过媒体查询给PC和移动端设置不同的background-attachment，同时确保基础样式正确：

body, html {
  height: 100%;
  margin: 0; /* 清除默认边距，避免不必要的滚动条 */
}

.wide {
  width: 100%;
  height: 100%;
  background-image: url('sebastian-unrau-42537-unsplash.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 移动端默认不使用fixed */
}

/* 仅在PC端（宽度≥768px）启用fixed效果 */
@media (min-width: 768px) {
  .wide {
    background-attachment: fixed;
  }
}

方案二：使用img标签替代背景图（更可靠） #

如果背景图的fixed效果不是必须的，直接用img标签配合定位裁剪，能更精准控制图片显示：

HTML修改：

<header class="wide">
  <img src="sebastian-unrau-42537-unsplash.jpg" alt="背景图">
</header>

CSS样式：

body, html {
  height: 100%;
  margin: 0;
}

.wide {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 裁剪超出部分 */
  position: relative;
}

.wide img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  height: 100%; /* 强制高度占满容器 */
  width: auto; /* 宽度自适应保持比例 */
}

这种方式直接强制图片高度为100%，宽度自动适配比例，超出容器的部分被裁剪，PC和移动端都能完美实现“100%高度+按需裁剪宽度”的效果，完全不会变形。

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