Bootstrap图片不遵循父级flex容器尺寸问题求助

我尝试将一张图片、标题和按钮定位在另一张图片上方，但小屏幕尺寸下，这张小图片无法自适应缩放，超出了作为背景的容器图片范围。

原实现代码 #

<body>
    <div class="container-fluid d-flex d-lg-flex justify-content-start align-items-center justify-content-lg-start align-items-lg-center" style="position: relative;">
        <div class="row">
            <div class="col-md-12"><img class="img-fluid" src="https://i.ibb.co/kHRZWBf/div-comp-Content-Image-Slideshow-image-Slide.png" /></div>
        </div>
        <div style="position: absolute;"><img class="img-fluid" src="https://i.ibb.co/mS1tN4r/vr-glasses-1.png" />
            <h2>Heading</h2>
          <button class="btn btn-primary" type="button">Button</button>
        </div>
    </div>
</body>

解决方案 #

问题出在绝对定位的元素脱离了文档流——虽然小图加了img-fluid，但它的父容器（那个绝对定位的div）没有设置和背景图绑定的宽度限制，导致小屏幕下无法跟着背景图自适应缩放。

可以通过以下调整解决：

• 给绝对定位的容器设置基于父容器的宽度限制，比如用百分比的max-width
• 用百分比值设置定位的top/left，确保不同屏幕下位置相对背景图保持一致
• 简化父容器的结构，去掉不必要的flex和栅格嵌套

修改后的代码示例：

<body>
    <!-- 用Bootstrap的position-relative类代替内联样式 -->
    <div class="container-fluid position-relative">
        <!-- 直接放背景图，不需要row和col嵌套 -->
        <img class="img-fluid" src="https://i.ibb.co/kHRZWBf/div-comp-Content-Image-Slideshow-image-Slide.png" />
        <!-- 绝对定位容器：设置百分比宽度和定位 -->
        <div class="position-absolute" style="top: 10%; left: 5%; max-width: 30%;">
            <img class="img-fluid" src="https://i.ibb.co/mS1tN4r/vr-glasses-1.png" />
            <h2>Heading</h2>
            <button class="btn btn-primary" type="button">Button</button>
        </div>
    </div>
</body>

如果需要针对不同屏幕精细调整宽度，可以加CSS媒体查询：

@media (max-width: 768px) {
    .position-absolute {
        max-width: 40%; /* 小屏幕下增大图片占比 */
        top: 8%;
        left: 3%;
    }
}

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