如何在HTML/CSS中添加可滚动的长背景图片？

数据老陈

2026-8-13

解决长图背景滚动浏览的问题

你的核心问题是容器高度未匹配长图的实际比例，导致页面无法滚动显示完整图片。以下是两种简单有效的解决方案：

方案一：使用背景图实现

调整容器高度以匹配图片宽高比，同时修正html/body的高度限制：

修改后的CSS代码

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

html{
  overflow-x: hidden; /* 避免小屏幕出现横向滚动条 */
}
body{
  min-height: 100vh; /* 保证页面至少占满视口高度 */
  font-family: 'functionPro';
}

.bgImageFull{
  background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
  width: 100vw; /* 占满整个视口宽度 */
  height: calc(100vw * 3740 / 1920); /* 按图片1920:3740的宽高比计算容器高度 */
  background-repeat: no-repeat;
  background-size: 100% auto; /* 背景图宽度铺满容器，高度自动适配比例 */
}

原理说明

之前的html, body{height:100%}会把容器高度限制在视口范围内，无法撑开页面产生滚动；
calc(100vw * 3740 / 1920)会根据当前视口宽度，按图片原始比例自动计算容器高度，确保图片完整显示，同时页面能垂直滚动浏览全部内容。

方案二：直接使用img标签（更简单）

如果不需要背景图的特殊效果，直接用img标签是最省心的方式，浏览器会自动维护图片比例：

HTML代码

<img src="../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg" class="full-bg-image">

CSS代码

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

body{
  font-family: 'functionPro';
}

.full-bg-image{
  width: 100vw; /* 占满视口宽度 */
  height: auto; /* 自动按比例计算高度 */
  display: block; /* 消除图片默认的行内间距 */
}