Bootstrap Studio实现图片叠加，防止上层图片随页面缩放移位

你当前用固定像素值的margin来调整人物图位置，页面尺寸变化时背景图会缩放，但margin的像素值不会跟着自适应，所以人物图就会移位。改用CSS定位+百分比单位就能解决这个问题，具体修改如下：

步骤1：修改HTML结构（移除内联样式） #

把人物图的内联margin、width、height都删掉，让样式统一由CSS控制：

<!DOCTYPE html>
<html data-bs-theme="light" lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Untitled</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/aos.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
<div class="container">
    <div id="bckgrnd">
        <img class="img-fluid" src="assets/img/GTLogo_backgorund.jpg">
        <div id="guy">
            <img class="img-fluid" data-aos="slide-right" data-aos-duration="900" src="assets/img/GT_Guy.png">
        </div>
    </div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/aos.min.js"></script>
<script src="assets/js/bs-init.js"></script>
</body>
</html>

步骤2：在styles.css中添加定位样式 #

用相对定位给父容器做基准，绝对定位+百分比控制人物图的位置和大小：

#bckgrnd {
    position: relative;
    display: inline-block;
    width: 100%;
    /* 确保父容器高度和背景图一致，避免塌陷 */
}

#guy {
    position: absolute;
    /* 根据你想要的位置调整百分比，替代原来的固定margin */
    top: 70%; /* 可根据实际效果微调，对应原来的margin-top */
    left: 2%; /* 对应原来的margin-left */
    /* 用百分比设置大小，保持响应式 */
    width: 35%;
    height: auto; /* 自动保持图片宽高比 */
}

原理说明 #

• 给#bckgrnd设置position: relative后，里面的绝对定位元素会以它为参考系，不会乱跑。
• 用百分比设置top、left和width，会随着父容器（也就是背景图）的尺寸变化自动调整，完美适配不同页面大小。

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