如何调整含内容div的高度以完整显示背景图片

我需要实现一个带背景图片、前景包含内容的div，要求背景图始终完整显示，规则如下：

• 将图片缩放至与div宽度一致，自动调整div高度以完整展示图片
• 若div高度已足够容纳内容，超出图片高度的部分显示白色背景

之前找到的方案只适用于无内容的div，没法适配有内容的场景。

尝试方案1：使用background-image #

.example{
    background-image: url(https://picsum.photos/id/12/200/100); 
    background-repeat: no-repeat;
    background-size: 100%;
}

<div class="example" style="width:300px;">
    This should be 150px heigh;
</div>

问题：图片会被拉伸，且div高度无法自动适配图片比例。

尝试方案2：使用img+绝对定位内容 #

.example2{
    position:relative;
}

.example2img{
    width:100%;
    height:auto;
}

.example2inner{
    position:absolute;
    top:0px;
}

<div class="example2" style="width:150px;">
    <img class="example2img" src="https://picsum.photos/id/12/200/100">
    <div class="example2inner">
        This should as high as it needs to be to fit the content. {a lot of content}
    </div>
</div>

问题：div高度不会随内容自动增加，内容过多时会溢出容器。

解决方法：利用宽高比占位实现自适应容器 #

核心思路是通过图片原始宽高比创建padding占位高度，同时让内容流式布局，容器会自动适应内容高度，超出图片区域的部分显示白色背景。

代码实现（以2:1宽高比图片为例） #

.image-container {
    position: relative;
    width: 100%;
    /* 按图片宽高比计算padding-top：100/200*100% = 50% */
    padding-top: 50%;
    background-image: url(https://picsum.photos/id/12/200/100);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
}

.container-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* 确保内容至少撑满图片占位高度 */
    min-height: 100%;
    padding: 1rem;
    box-sizing: border-box;
}

<!-- 宽度300px的容器 -->
<div class="image-container" style="width: 300px;">
    <div class="container-content">
        这部分内容会显示在背景图上方，当内容高度超过图片高度时，容器会自动拉长，超出部分显示白色背景。
    </div>
</div>

<!-- 内容较多的示例 -->
<div class="image-container" style="width: 300px;">
    <div class="container-content">
        这是一段较长的内容示例。这是一段较长的内容示例。这是一段较长的内容示例。这是一段较长的内容示例。这是一段较长的内容示例。这是一段较长的内容示例。这是一段较长的内容示例。这是一段较长的内容示例。这是一段较长的内容示例。这是一段较长的内容示例。这是一段较长的内容示例。这是一段较长的内容示例。
    </div>
</div>

原理说明 #

1. padding-top: 50%：百分比基于容器宽度计算，能精准保持图片的原始宽高比，确保背景图完整显示且不拉伸。
2. 内容容器设置min-height: 100%：既让内容覆盖在背景图上方，又保证内容至少填满图片占位高度；当内容高度超过占位高度时，父容器会被自动撑开，超出部分显示默认白色背景。
3. 若图片宽高比不同，只需调整padding-top的百分比即可（比如4:3图设为75%，16:9图设为56.25%）。

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