解决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="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399.jpg.webp" media="(min-width: 600px)"> 
        <img src="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399-450x300.jpg.webp" alt="landing image" decoding="“async”"> 
    </picture>
</section>

*, ::before, ::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#hero {
    color: #fff;
    height: auto; /* 现在父容器可以根据图片高度自适应了 */
    /* background-position, background-repeat, background-size 这些属性不再需要，因为我们使用<img>标签 */
    padding-top: 0; /* 移除原有padding，由内容区控制 */
    padding-bottom: 0; /* 移除原有padding，由内容区控制 */
    position: relative; /* 必须设置为相对定位，以便子元素的绝对定位参照它 */
    font-family: 'Montserrat', sans-serif;
    z-index: 1; /* 确保整个hero区域在其他内容之上 */
    overflow: hidden; /* 防止内部内容溢出 */
}

/* 确保图片在文档流中，并占据父容器宽度 */
.background-wrapper picture {
    display: block; /* 使picture元素行为像块级元素 */
    width: 100%;
    height: auto; /* 让图片高度自适应 */
    /* 移除position: absolute, inset, z-index: -1 */
    /* aspect-ratio: auto; (根据需要保留或移除) */
}

.background-wrapper picture img {
    display: block; /* 确保img元素行为像块级元素 */
    width: 100%;
    height: auto; /* 让图片高度自适应 */
    object-fit: cover; /* 确保图片覆盖整个区域 */
    /* 移除position: absolute, top, left */
}

/* 内容层绝对定位，覆盖在图片上方 */
.hero-content {
    position: absolute; /* 绝对定位，浮动在图片上方 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 占据父容器的全部宽高 */
    display: flex; /* 保持原有的flex布局，用于内容对齐 */
    justify-content: flex-start; /* 根据需要调整对齐方式 */
    align-items: center; /* 垂直居中内容，可根据需要调整 */
    padding: 80px 0 60px; /* 调整padding以控制内容与边缘的距离 */
    z-index: 2; /* 确保内容在遮罩和图片之上 */
    max-width: 911px; /* 保持原有最大宽度 */
    margin: 0 auto; /* 居中内容区域 */
}

.hero-text {
    margin-top: 0; /* 根据新的内容定位调整 */
    max-width: 750px;
}

/* 背景遮罩层绝对定位，位于图片和内容之间 */
.background-wrapper::before {
    content: '';
    position: absolute;
    background-color: #000;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: .5;
    z-index: 1; /* 位于图片(默认z-index 0)之上，内容(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`;
        } else {
            // 如果图片未加载完成，等待加载事件
            heroImage.onload = () => {
                const imageHeight = heroImage.offsetHeight;
                heroSection.style.height = `${imageHeight}px`;
            };
        }
    }

    // 页面加载时设置一次高度
    setHeroHeight();

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