如何让图标/图片固定在背景图指定位置且支持响应式适配？

原代码里用了固定像素值（top: 500px、left: 600px、width: 50px），窗口缩放时这些固定值不会随背景图的缩放比例调整，自然会出现位置偏移、尺寸不匹配的问题。下面是修正后的方案：

核心思路 #

1. 背景图保持原始比例缩放，避免拉伸变形
2. 上层图标用百分比定位，绑定背景图容器的相对位置
3. 图标尺寸用**视口单位（vw）**或百分比，随窗口等比例变化

修正后的代码 #

<style>
    .page {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden; /* 防止背景图超出视口 */
    }

    .bg {
        width: 100%;
        height: 100%;
        object-fit: contain; /* 保持背景图比例，完整显示在容器内 */
        /* 若需要铺满视口（允许裁剪），替换为 object-fit: cover; */
    }

    .top {
        position: absolute;
        width: 4vw; /* 宽度为视口宽度的4%，随窗口等比例缩放 */
        height: auto;
        /* 用百分比定位，数值根据背景图上的目标位置调整 */
        top: 65%; 
        left: 70%;
        /* 可选：让图标中心对准目标点，加上下面这行 */
        /* transform: translate(-50%, -50%); */
    }
</style>

<body>
<div class="page">
    <img class="bg" src="bg.jpg" alt="背景图">
    <img class="top" src="plus.png" alt="上层图标">
</div>
</body>

关键细节说明 #

• object-fit: contain：这是保证位置准确的核心，它让背景图按原始比例缩放，完整填充容器，不会变形。如果直接用width:100vw; height:100vh;，背景图会被拉伸，图标相对位置自然会乱。
• 百分比定位：top: 65%指图标顶部距离容器顶部的距离是容器高度的65%，窗口缩放时这个比例始终不变，图标就会跟着背景图的相对位置移动。
• vw单位：4vw表示宽度是当前视口宽度的4%，窗口变宽变窄时，图标尺寸都会等比例调整，适配屏幕大小。
• 中心定位优化：如果需要图标中心精准落在背景图的某个点上，加上transform: translate(-50%, -50%);，同时把top和left设为该点在背景图上的百分比即可。

替代方案：背景图作为容器背景 #

如果不想用<img>标签放背景图，也可以把背景图设为容器的背景样式，代码如下：

<style>
    .page {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: url('bg.jpg') no-repeat center center;
        background-size: contain; /* 保持比例 */
        overflow: hidden;
    }

    .top {
        position: absolute;
        width: 4vw;
        height: auto;
        top: 65%;
        left: 70%;
        /* transform: translate(-50%, -50%); */
    }
</style>

<body>
<div class="page">
    <img class="top" src="plus.png" alt="上层图标">
</div>
</body>

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