制作带有覆盖锚标记屏幕响应的图像

问题描述 投票：0回答：1

所以我有一个图像，上面覆盖有锚标签，我正在尝试使其响应屏幕尺寸。目前，当我希望它响应屏幕高度而不是屏幕宽度时，我已经能够使其响应屏幕宽度而不是屏幕高度。此外，我想要重新缩放并随图像移动的锚标记没有这样做，并且保持在相同的位置而不移动。

图像 + 锚点的 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" width="100%" height="100%">
    <div class="Map81">
        <a href="Bus_81.html">81 - Hounslow Bus Station - Slough Bus Station</a>
    </div>
</div>
</body>
</html>

CSS 同样的事情

.Container{
    position: absolute;
    max-width: 1920px;
    max-height: 1080px;
}

a:link{
    color: black;
}

.Map81{
    
    position: absolute;
    left: 92px;
    top: 962px;
    font-size: 7pt;
    font-family: "p22-underground", sans-serif;
    font-weight: 600;
    font-style: normal;
    max-width: 1920px;
    max-height: 1080px;
}

我预计这至少会让图像和锚点同时响应宽度和高度，因为我可以从那里修改宽度，看看这是否会阻止它响应宽度，但它只会改变图像相对于屏幕宽度的尺寸。让我困惑的是，当我对 Google 地图嵌入执行相同操作（减去在顶部覆盖锚标记）时，它确实根据屏幕宽度 + 高度更改了大小，并且代码似乎相同（至少对我来说）。我认为 Container div 意味着锚标记将随图像调整大小，因为这是我对 Container div 将完成的任务的理解，但这要么不正确，要么不起作用，因为我错过了一些东西.

Google 地图嵌入的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Route 203</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <iframe class="GoogleMap" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1391.5036072147677!2d-0.35517199999999644!3d51.47118800000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48760cdf98b9d939%3A0x7679c4216b35f71b!2sHounslow%20Bus%20Station%20(Stop%20D)!5e1!3m2!1sen!2suk!4v1735232252439!5m2!1sen!2suk" width="100%" height="100%" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>

相同的CSS

.GoogleMap{
    position: absolute;
    max-width: 600px;
    max-height: 600px;
}

我一直故意避免在这里使用 JavaScript，因为我不理解它，至少对我来说（我是 HTML 新手，没有使用它太久）太复杂并且没有意义。所以，如果可能的话，我想避免在这里使用它，因为我还没有达到我愿意深入研究它的水平。

html css responsive-design responsive-images
1个回答
0
投票

将 

.Container
的高度和高度设置为 100% 并相对位置。这将使处理锚标记位置变得更容易。

.Container{
    position: absolute;
    max-width: 1920px;
    max-height: 1080px;
}

使用 left、top、transform 属性使 img 位置位于中间。

.Map81{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 7pt;
    font-family: "p22-underground", sans-serif;
    font-weight: 600;
    font-style: normal;
}

这是完整的片段。

html {
    height: 100%;
}

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

.Container{
    width: 100%;
    height: 100%;
    position: relative;
}

a:link{
    color: black;
}

.Map81{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 7pt;
    font-family: "p22-underground", sans-serif;
    font-weight: 600;
    font-style: normal;
}
<div class="Container">
    <img src="https://images.unsplash.com/photo-1730119986244-eb33b57b3950?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="100%" height="100%">
    <div class="Map81">
        <a href="Bus_81.html">81 - Hounslow Bus Station - Slough Bus Station</a>
    </div>
</div>

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.