Bootstrap 5.3中如何让容器高度适配contain缩放的背景图？

当用background-size: contain时，背景图会按宽高比完整显示，但固定height:100vh会让容器强制撑满屏幕，导致高度冗余。下面两种方法可以让容器高度自动匹配背景图缩放后的实际高度：

方法一：用padding-top百分比维持宽高比（推荐） #

CSS里的padding百分比是按父元素宽度计算的，我们可以利用这个特性，通过背景图的原始宽高比算出padding-top的值，让容器高度自动适配：

1. 先算背景图的宽高比：(图片高度 / 图片宽度) * 100%。比如你的图是1000px宽、600px高，那比例就是60%。
2. 修改CSS，去掉height:100vh，用padding-top撑起高度：

.city-container {
  background-color: #839E43;
  background-image: url("/images/city/city-bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  width: 100%;
  position: relative;
  padding-top: 60%; /* 替换成你实际的宽高比百分比 */
  height: 0; /* 清空固定高度，让padding-top控制高度 */
}

这样容器高度会和宽度保持背景图的原始比例，屏幕宽度变化时，背景图用contain缩放后，容器高度刚好匹配图的显示高度。

方法二：用隐藏img标签自适应高度 #

如果不确定背景图的宽高比，或者要动态换图，可以在容器里加个隐藏的img，让容器自动适应图片高度：

修改HTML：

<div className="d-flex flex-column">
  <div className={styles["city-container"]}>
    <img src="/images/city/city-bg.png" alt="" className={styles["hidden-bg-img"]} />
  </div>
</div>

添加CSS：

.city-container {
  background-color: #839E43;
  background-image: url("/images/city/city-bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  width: 100%;
  position: relative;
  display: inline-block; /* 让容器自适应内部元素高度 */
}

.hidden-bg-img {
  width: 100%;
  visibility: hidden; /* 隐藏图片但保留占位 */
  pointer-events: none; /* 不干扰交互 */
}

这个方法不用计算比例，img会自动按屏幕宽度缩放，容器高度跟着img走，背景图也能完美匹配这个高度。

注意事项 #

• 因为已经给容器加了position: relative，后续要叠加的图片直接设position: absolute就能定位，不会影响容器高度。
• 两种方法都适配移动端优先布局，能保证不同屏幕下背景图完整显示，容器高度没有多余空间。

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