如何让竖版长背景图完整显示并使滚动条可见？

这个问题很常见，核心原因是你的页面容器（比如body）高度没有匹配竖版背景图的长度——浏览器默认只会根据页面内容的高度生成滚动条，背景图本身不会自动撑开页面高度，所以只能看到视口范围内的局部。下面给你几个靠谱的解决方案：

方法1：用宽高比让容器适配背景图（推荐） #

利用CSS的aspect-ratio属性，让页面容器的宽高比和你的背景图（2160*3840，即9:16）完全匹配，这样容器会自动根据宽度计算出足够的高度，页面就能生成滚动条来显示完整背景图。

body {
  margin: 0;
  /* 匹配背景图的宽高比：2160/3840 = 9/16 */
  aspect-ratio: 9/16;
  /* 确保容器至少占满视口高度，避免窄屏时高度不足 */
  min-height: 100vh;
  /* 背景图基础设置 */
  background-image: url('你的背景图路径');
  background-repeat: no-repeat;
  background-position: top center;
  /* 让背景图宽度适配容器，高度自动缩放以保持完整 */
  background-size: 100% auto;
}

如果你的页面有其他内容，只需要把这个宽高比设置给包裹背景图的容器（比如一个.background-container）即可，不用直接加在body上。

方法2：用img标签替代背景图（更直观） #

如果不想折腾背景图的CSS设置，可以直接用<img>标签把竖版图放在页面最底层，它会自动撑开页面高度，滚动页面就能看到完整图片：

<body>
  <!-- 背景图放在最底层 -->
  <img src="你的背景图路径" class="full-background" alt="竖版长背景">
  <!-- 你的页面内容 -->
  <div class="page-content">
    <!-- 内容区域 -->
  </div>
</body>

对应的CSS：

.full-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1; /* 把图片放在内容下方 */
}

body {
  /* 确保页面能滚动到图片底部，计算方式：宽度 * (高度/宽度) = 宽度*16/9 */
  min-height: calc(100vw * 16/9);
  margin: 0;
}

兼容旧浏览器的 Fallback 方案 #

如果需要兼容不支持aspect-ratio的旧浏览器（比如IE），可以用padding-top模拟宽高比：

.background-container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  margin: 0;
}

/* 用padding-top模拟9:16的比例：3840/2160 = 177.78% */
.background-container::before {
  content: "";
  display: block;
  padding-top: 177.78%;
}

.background-container {
  background-image: url('你的背景图路径');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

这几个方法都能解决你的问题，优先推荐方法1，代码简洁且响应式表现最好。

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