解决CSS绝对定位图片溢出：实现父容器自适应包裹的响应式布局

<section id="hero" class="background-wrapper">
    <div class="container hero-content">
        <div class="hero-text">
            <h1>Header Title</h1>
            <h2>Header description</h2>
        </div>
    </div>
    <!-- 图片被绝对定位，导致父容器无法包裹 -->
    <picture class="hero-picture"> 
        <source srcset="image-large.webp" media="(min-width: 600px)"> 
        <img src="image-small.webp" alt="landing image"> 
    </picture>
</section>

#hero {
    color: #fff;
    height: auto; /* 父容器高度设置为auto，但无法感知绝对定位子元素 */
    position: relative; /* 确保子元素可以相对于它定位 */
    padding-top: 80px;
    padding-bottom: 60px;
    z-index: 1;
}

.hero-picture {
    position: absolute; /* 关键问题所在：脱离文档流 */
    height: auto;
    width: 100%;
    inset: 0; /* top, right, bottom, left 均为 0 */
    z-index: -1; /* 作为背景层 */
}

.hero-picture img {
    position: absolute; /* 图片本身也绝对定位 */
    height: 100%; /* 填充父picture标签 */
    width: 100%;
    object-fit: cover; /* 确保图片覆盖整个区域 */
}

#hero {
    color: #fff;
    /* height: auto; 保持不变 */
    position: relative;
    padding-top: 80px;
    padding-bottom: 60px;
    z-index: 1;
    overflow: hidden; /* 清除浮动，使父容器包裹浮动子元素 */
}

.hero-picture {
    /* 移除 position: absolute */
    float: left; /* 或者 float: right */
    width: 100%;
    height: auto; /* 让图片高度自适应 */
    /* z-index: -1; 浮动元素无法直接设置z-index到背景层 */
    /* 如果需要背景效果，可能需要将图片作为伪元素背景或使用transform */
}

.hero-picture img {
    /* 移除 position: absolute */
    display: block; /* 移除图片默认的底部空间 */
    width: 100%;
    height: auto;
    object-fit: cover;
}

.hero-content {
    /* 如果hero-content也浮动，需要清除浮动或使用其他布局 */
    /* 如果hero-content不浮动，则需要调整margin以避开浮动图片 */
    position: relative; /* 确保文本内容在图片之上 */
    z-index: 2;
}

#hero {
    color: #fff;
    height: auto; /* 依然是auto */
    position: relative;
    padding-top: 80px;
    padding-bottom: 60px;
    z-index: 1;

    /* 将图片设置为背景 */
    background-image: url('image-small.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* 覆盖整个区域 */
    /* 伪元素叠加层 */
    background-color: #000; /* 默认背景色 */
}

/* 如果需要透明度叠加层，可以为伪元素设置绝对定位 */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明叠加 */
    z-index: 0; /* 确保在背景图片之上，内容之下 */
}

.hero-content {
    position: relative; /* 确保内容在叠加层之上 */
    z-index: 2;
    display: flex; /* 使用Flexbox布局内容 */
    justify-content: flex-start;
    align-items: center; /* 垂直居中 */
    min-height: 300px; /* 确保内容区域有最小高度，防止图片过小导致内容塌陷 */
    /* 其他内容样式 */
}

/* 移除 .hero-picture 和 .hero-picture img 的样式 */
.hero-picture {
    display: none; /* 隐藏原始图片，因为已经作为背景 */
}

#hero {
    color: #fff;
    height: auto;
    position: relative;
    padding-top: 80px;
    padding-bottom: 60px;
    z-index: 1;
    display: flex; /* 启用Flexbox */
    flex-direction: column; /* 垂直堆叠 */
    /* 可以设置一个最小高度 */
    min-height: 300px;
}

.hero-picture {
    /* 移除 position: absolute */
    width: 100%;
    /* order: -1; 可以让图片在视觉上排在前面，但仍然在文档流中 */
    /* 或者不设置order，让它自然在顶部 */
}

.hero-picture img {
    display: block;
    width: 100%;
    height: auto; /* 关键：让图片高度自适应，并影响父容器高度 */
    object-fit: cover;
}

.hero-content {
    position: absolute; /* 内容现在需要绝对定位到图片之上 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 填充整个父容器 */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; /* 根据需要调整对齐 */
    padding-top: 80px;
    padding-bottom: 60px;
    z-index: 2; /* 确保内容在图片之上 */
}

document.addEventListener('DOMContentLoaded', function() {
    const heroSection = document.getElementById('hero');
    const heroPicture = heroSection.querySelector('.hero-picture');
    const heroImage = heroPicture.querySelector('img');

    function setHeroHeight() {
        // 确保图片已经加载完成
        if (heroImage.complete) {
            const imageHeight = heroImage.offsetHeight; // 获取图片实际渲染高度
            heroSection.style.height = `${imageHeight}px`;
            // 如果父容器有padding，需要加上padding的高度
            // const paddingTop = parseFloat(getComputedStyle(heroSection).paddingTop);
            // const paddingBottom = parseFloat(getComputedStyle(heroSection).paddingBottom);
            // heroSection.style.height = `${imageHeight + paddingTop + paddingBottom}px`;
        } else {
            // 如果图片未加载完成，等待加载
            heroImage.onload = setHeroHeight;
        }
    }

    // 初始调用
    setHeroHeight();

    // 监听窗口大小变化，重新调整高度
    window.addEventListener('resize', setHeroHeight);
});