如何让绝对定位Div精准覆盖自适应缩放的图片？

问题核心在于：你当前的绝对定位div是相对于.container（100%视口高度）定位的，但图片通过object-fit: contain缩放后，实际显示尺寸小于容器，导致div无法精准覆盖图片；而给.container加width: max-content后，容器宽度固定为图片原始宽度，失去了横向自适应能力。

修正方案 #

我们需要一个贴合图片实际缩放尺寸的内部容器，让绝对定位div相对于这个容器定位，同时保持图片的自适应能力：

修改后的CSS代码

html, body {
    height: 100%;
    margin: 0;
}

.container {
    height: 100%;
    display: flex;
    background-color: green;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.img-wrapper {
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

#bg {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#absolute-div {
    position: absolute;
    top: 0;
    left: 0;
    text-align: right;
    font-family: sans-serif;
    font-size: 36px;
    border: 5px solid blue;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

修改后的HTML代码

<div class="container">
    <div class="img-wrapper">
        <img src="https://placehold.co/850x450" id="bg"/>
        <div id="absolute-div">
            Lorem Ipsum
        </div>
    </div>
</div>

原理说明 #

1. .container使用flex的justify-content: center和align-items: center，让内部的.img-wrapper在容器中居中，同时不限制其宽度，保留自适应能力。
2. .img-wrapper设置max-width: 100%和max-height: 100%，确保它不会超出父容器的范围，同时其尺寸会贴合图片的实际缩放大小。
3. 图片去掉固定宽高，改用max-width: 100%和max-height: 100%，自动保持比例并自适应父容器。
4. #absolute-div相对于.img-wrapper定位，宽度和高度设为100%，就能精准覆盖图片的实际显示区域。

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