解决CSS绝对定位图片导致父容器高度塌陷问题：响应式布局的实践

<section id="hero" class="background-wrapper">
    <div class="container hero-content">
        <div class="hero-text">
            <h1>Header</h1>
            <h2>Header description</h2>
        </div>
    </div>
    <picture class="hero-picture"> 
        <source srcset="path/to/large-image.webp" media="(min-width: 600px)"> 
        <img src="path/to/small-image.webp" alt="landing image" decoding="“async”"> 
    </picture>
</section>

#hero {
    color: #fff;
    height: auto; /* 父容器高度自适应 */
    position: relative; /* 为绝对定位子元素提供定位上下文 */
    z-index: 1;
}

.background-wrapper picture {
    position: absolute; /* 图片脱离文档流 */
    height: auto;
    width: 100%;
    inset: 0; /* 等同于 top:0; right:0; bottom:0; left:0; */
    z-index: -1; /* 将图片置于内容下方 */
    aspect-ratio: auto;
}
.background-wrapper picture img {
    position: absolute; /* img也绝对定位 */
    height: auto;
    width: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

#hero {
    color: #fff;
    height: auto; /* 父容器高度自适应 */
    position: relative; /* 如果有绝对定位的叠加内容，仍需此属性 */
    z-index: 1;
    /* 使用Flexbox或Grid来布局图片和内容 */
    display: flex; 
    flex-direction: column; /* 让图片和内容垂直堆叠 */
}

.background-wrapper picture {
    /* 移除绝对定位 */
    position: static; /* 或不设置此属性 */
    width: 100%;
    height: auto;
    z-index: -1; /* 保持在内容下方 */
    /* 确保图片在文档流中 */
}
.background-wrapper picture img {
    /* 移除绝对定位 */
    position: static; /* 或不设置此属性 */
    width: 100%;
    height: auto;
    display: block; /* 移除图片默认的inline-block间隙 */
    object-fit: cover;
}

.hero-content {
    position: absolute; /* 将内容绝对定位到图片上方 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 覆盖整个父容器 */
    display: flex;
    justify-content: flex-start;
    align-items: center; /* 垂直居中内容 */
    z-index: 2; /* 确保内容在图片上方 */
    padding: 80px 0 60px; /* 根据原padding调整 */
}

#hero {
    color: #fff;
    height: auto; /* 仍可保持auto，但需其他方式撑开高度 */
    min-height: 300px; /* 例如，设置一个最小高度 */
    background-image: url('path/to/default-image.webp'); /* 默认背景图 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; /* 如果有绝对定位的叠加内容 */
    z-index: 1;
    padding-top: 80px; /* 原有内容padding */
    padding-bottom: 60px; /* 原有内容padding */
}

/* 如果需要响应式背景图，可以使用媒体查询切换 background-image */
@media (min-width: 600px) {
    #hero {
        background-image: url('path/to/large-image.webp');
    }
}

/* hero-content 保持不变，它会在背景图上方显示 */
.hero-content {
    max-width: 911px;
    margin: 0 auto; /* 居中内容 */
    /* 其他样式... */
}

#hero {
    color: #fff;
    height: auto; /* 保持auto */
    position: relative;
    z-index: 1;
    /* 移除 padding-top 和 padding-bottom，因为高度由占位符撑开 */
    /* 如果内容需要内部留白，可以在 hero-content 上设置 */
}

/* 方案三的核心：创建一个响应式纵横比占位符 */
#hero::before {
    content: '';
    display: block;
    padding-top: 66.66%; /* 假设图片纵横比为3:2 (高度/宽度 * 100%) */
    /* 也可以使用 aspect-ratio 属性，但兼容性不如 padding-top 广 */
    /* aspect-ratio: 3 / 2; */ 
}

.background-wrapper picture {
    position: absolute; /* 保持绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 覆盖整个父容器（由padding-top撑开的高度） */
    z-index: -1;
    /* 移除 inset: 0; aspect-ratio: auto; */
}
.background-wrapper picture img {
    position: static; /* img本身不需要绝对定位，它会填充其