背景图片在小屏幕被裁切，如何实现自适应完整显示？

嗨，作为前端新手遇到这个问题很正常，我来帮你理清思路并给出可行的解决方案！

你现在的问题出在background-size: cover这个属性上——它的作用是让背景图完全覆盖容器，同时保持图片的宽高比，所以当屏幕变窄（比如iPhone 6S的宽度只有375px），而你的banner容器高度固定为680px时，图片为了填满高度，宽度就会超出屏幕，自然会被两侧裁切。你之前加的max-width: 100%是给容器本身设置的，对背景图没有效果，所以没用~

下面给你几个实用的解决方法，你可以根据需求选择：

方法1：改用background-size: contain #

这个属性会让背景图完整显示在容器内，同时保持宽高比，不会被裁切。缺点是如果容器的比例和图片不一致，容器会出现空白区域。

修改你的CSS：

.banner {
  background: url(banner.jpg) no-repeat center center;
  /* 去掉fixed，移动端fixed背景可能有兼容性问题 */
  background-size: contain;
  height: auto; /* 让容器高度随图片自适应，避免留白过多 */
  min-height: 680px; /* 可选，保证大屏下的最小高度 */
  position: relative;
}

方法2：媒体查询中调整背景图尺寸 #

如果不想用contain，可以在小屏设备上单独修改background-size，让图片宽度或高度适配容器，从而完整显示：

.banner {
  background: url(banner.jpg) no-repeat center center;
  background-size: cover;
  height: 680px;
  position: relative;
}

@media (max-width: 768px) {
  .banner {
    /* 让图片宽度占满容器，高度自适应，保证完整显示 */
    background-size: 100% auto;
    /* 如果你想优先保证高度填满容器，就用下面这个，会出现左右留白 */
    /* background-size: auto 100%; */
  }
}

方法3：用padding-top维持图片比例（推荐） #

你的图片是1200*900px，宽高比是4:3（900/1200=75%）。我们可以去掉固定高度，用padding-top:75%来让容器始终保持这个比例，这样background-size:cover就能完美适配，不会裁切也不会有空白：

.banner {
  background: url(banner.jpg) no-repeat center center;
  background-size: cover;
  padding-top: 75%; /* 按图片比例计算，撑开容器高度 */
  height: 0; /* 去掉固定高度，避免冲突 */
  position: relative;
}

/* 别忘了给内部的content设置绝对定位，不然内容会被挤到容器外面 */
.banner .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 让内容垂直居中 */
  padding: 20px; /* 加内边距避免内容贴边 */
}

这个方法是响应式背景图的常用技巧，既能保证图片完整显示，又能让容器比例和图片一致，适配各种屏幕尺寸。

另外提醒你：background-attachment: fixed在移动端浏览器可能有奇怪的兼容性问题，比如背景图位置异常，建议暂时去掉这个属性哦~

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