CSS问题：移动端背景图片无法自适应缩放求助

你已经试了不少常见的background-size属性，但移动端适配往往需要结合视口设置、容器布局等多方面调整，我给你几个针对性的建议：

1. 先补上移动端适配的核心——Viewport Meta标签 #

这是很多移动端样式失效的根源，如果页面头部没加这个标签，浏览器会用桌面端的视口尺寸渲染，导致所有适配规则都白搭。赶紧在HTML的<head>里加上：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 调整.intro容器的布局与背景属性 #

你用了display: table，这个属性在移动端容易导致高度计算异常，结合背景属性一起调整试试：

.intro {
  display: block; /* 替换table布局，避免移动端高度计算bug */
  width: 100%; /* 强制容器占满屏幕宽度 */
  min-height: 100vh; /* 让容器至少铺满整个视口高度 */
  padding: 0;
  text-align: center;
  color: #333;
  /* 把背景属性合并写法，确保居中+覆盖容器 */
  background: url(../img/intro-bg.jpg) no-repeat center center / cover;
  background-attachment: scroll; /* 移动端别用fixed，会有适配兼容性问题 */
}

3. 给移动端单独写媒体查询优化 #

如果上面的通用调整还是达不到预期，可以针对小屏幕设备单独设置规则：

/* 针对手机等小屏设备 */
@media (max-width: 768px) {
  .intro {
    min-height: 70vh; /* 根据你的设计需求调整移动端高度 */
    background-size: contain; /* 或者用100% auto，看你想要图片完整显示还是覆盖容器 */
    background-position: center top;
  }
}

4. 排查是否有其他CSS冲突 #

有时候父元素的overflow: hidden、固定宽度，或者其他继承的样式会干扰背景图片的显示，你可以检查.intro的父容器有没有这类限制属性，必要时可以用!important临时测试（不推荐长期用，找到冲突根源再修改）。

另外提一句：你试过的vh单位在部分移动端浏览器里会因为地址栏的显示/隐藏跳动，如果遇到这个问题，可以用min-height: calc(100vh - 20px)（数值根据实际情况调整）来规避。

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