如何让带锚点标签的图片响应屏幕高度且锚点随图适配

问题核心 #

你当前的问题根源有三点：

1. 容器未设置相对定位，锚点的绝对定位基准是整个页面而非图片容器
2. 图片直接设width:100%会优先适配宽度，锚点用固定像素定位，自然无法跟随图片缩放
3. Google Map的iframe是替换元素，设置宽高100%时会自动匹配容器比例，而你的图片容器没做比例约束

解决步骤（纯HTML/CSS） #

1. 给容器添加position: relative，让锚点的绝对定位以容器为基准
2. 用padding-top按图片原始宽高比设置容器高度，实现以屏幕高度为优先的适配逻辑
3. 将图片设为绝对定位铺满容器，用object-fit: contain保证图片比例不拉伸变形
4. 把锚点的left/top从固定像素改为百分比（从原始像素位置换算而来）
5. 给容器加max-height:100vh，确保容器不会超出屏幕可视高度

修改后的完整代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buses Map</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://use.typekit.net/job3hev.css">
</head> 
<body>
<div class="Container">
    <img src="Test_assets/Map_Rescaled.png" alt="Bus Map">
    <div class="Map81">
        <a href="Bus_81.html">81 - Hounslow Bus Station - Slough Bus Station</a>
    </div>
</div>
</body>
</html>

CSS代码

/* 重置页面默认边距，避免出现滚动条 */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.Container{
    position: relative;
    max-height: 100vh; /* 容器高度不超过屏幕可视高度 */
    width: auto; /* 宽度随高度自动适配 */
    margin: 0 auto; /* 水平居中显示 */
    /* 按图片原始1920x1080的比例计算：1080/1920*100% = 56.25% */
    padding-top: 56.25%; 
}

.Container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持图片比例，完整显示在容器内 */
}

a:link{
    color: black;
}

.Map81{
    position: absolute;
    /* 原始left:92px → 92/1920*100% ≈ 4.79% */
    left: 4.79%;
    /* 原始top:962px → 962/1080*100% ≈ 88.98% */
    top: 88.98%;
    font-size: 0.6vw; /* 字体大小随容器宽度自适应 */
    font-family: "p22-underground", sans-serif;
    font-weight: 600;
    font-style: normal;
    white-space: nowrap; /* 防止文字换行错位 */
}

关键细节说明 #

• padding-top:56.25%：这是维持图片16:9比例的核心，容器高度由该百分比决定，同时受max-height:100vh限制，会优先适配屏幕高度，宽度自动跟随比例调整
• 百分比定位：将原固定像素位置转换为相对于容器宽高的百分比，容器缩放时锚点会同步移动
• object-fit:contain：确保图片不会被拉伸变形，始终完整显示在容器内

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