如何让背景图片适配不同屏幕并完整显示？

API 探路者

2026-8-15

解决方案

第一步：修复代码笔误

.main初始样式里的position: center是无效属性，必须改为background-position: center，否则居中设置不生效。

核心问题：`background-size: cover`的特性

你用的background-size: cover会强制图片拉伸/裁剪以完全覆盖容器，这就是图片被裁切、无法完整显示的原因——它优先保证容器填满，而非图片完整展示。根据需求，有两种解决思路：

思路1：强制图片完整显示（允许容器留白）

将background-size改为contain，它会保持图片原始比例，确保图片完整显示在容器内，容器剩余区域会留白。优化后的CSS可以用简写形式减少冗余：

.main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: url("images/BANNER.png") center / contain no-repeat fixed;
}

@media (max-width:375px) {
  .main {
    background: url("images/BANNER.png") center / contain no-repeat fixed;
  }
}

思路2：适配小屏幕，尽可能展示图片（无留白）

如果不想留白，可以在媒体查询中针对小屏幕调整background-size的具体值，比如根据图片比例设置为100% auto（宽度铺满容器，高度自适应）或auto 100%（高度铺满，宽度自适应）：

.main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: url("images/BANNER.png") center / cover no-repeat fixed;
}

@media (max-width:375px) {
  .main {
    background-size: 100% auto; /* 宽度铺满，高度按比例缩放，保证图片完整 */
  }
}