如何让可缩放背景图片适配屏幕宽度？附相关代码

看起来你想要让顶部、中间、底部的背景图自适应屏幕宽度，同时保持布局的完整性对吧？我帮你调整代码，解决这个问题：

先修正HTML类名错误 #

你原来的HTML里有类名拼写问题，先把这个改过来，确保CSS能正确匹配元素：

<div class="TabTop"></div>
<div class="TabMid"></div>
<div class="TabBot"></div>

调整后的CSS代码 #

下面的代码会让背景图自适应屏幕宽度，同时保持原图比例，中间区域维持垂直重复的效果：

/* 先确保根容器（html/body）有正确的高度，避免中间区域高度异常 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.TabTop {
  background-image: url("https://i.imgur.com/5qOZqaY.png");
  width: 100%;
  /* 用padding-top维持原图宽高比：168/1855 ≈ 9.06%，代替固定高度避免拉伸 */
  padding-top: 9.06%;
  height: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
}

.TabMid {
  background-image: url("https://i.imgur.com/6uMuiY4.jpg");
  width: 100%;
  /* 占满屏幕剩余高度（减去顶部和底部的比例高度） */
  height: calc(100% - 9.06% - 12.78%);
  background-repeat: repeat-y;
  background-size: 100% auto; /* 宽度铺满屏幕，高度按比例自动适配 */
  background-position: center;
}

.TabBot {
  background-image: url("https://i.imgur.com/5Psk33C.png");
  width: 100%;
  /* 原图宽高比：237/1855 ≈ 12.78% */
  padding-top: 12.78%;
  height: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center bottom;
}

关键修改说明 #

• 容器宽度自适应：把所有容器的固定宽度1855px改成width: 100%，让容器铺满屏幕宽度
• 顶部/底部比例保持：用padding-top替代固定高度，根据原图宽高比计算百分比，这样容器高度会随屏幕宽度自动调整，背景图不会拉伸变形
• 中间区域适配：设置background-size: 100% auto让背景图宽度铺满屏幕，同时保留垂直重复的效果；用calc()计算中间区域高度，确保整体布局填满屏幕
• 背景定位优化：添加background-position确保背景图始终居中对齐

如果你的中间区域是要根据内容高度自适应（而非占满屏幕），可以把.TabMid的height: calc(...)改成min-height: 500px（或者你需要的最小高度），让内容自然撑开高度即可。

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