html - Making An Image with overlaid anchor tags screen responsive - Stack Overflow

admin2025-05-02 1

So I've got an image with anchor tags overlaid ontop and I'm trying to make it responsive to screen sizes. At the moment I've been able to make it responsive to screen widths but not screen heights, when I want it to be responsive to screen heights but not screen widths. Furthermore, the anchor tags which I want to be rescaled and moved with the image isn't doing so, and is staying in the same position without moving.

HTML for the Image + Anchor

<!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=".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 for the same thing

.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;
}

I expected that this would at least make the image and anchor responsive to both widths and heights, as I could from there just tinker around with the widths and see if that would stop it being responsive for the width, however it only changes the image size relative to screen width. What confused me was when I did the same with a Google Map embed (minus overlaying an Anchor Tag on top), it did change size based on screen width + height, with what appears to be the same code (to me at least). I thought that the Container div would have meant the anchor tag would be resized with the image, as that was my understanding of what a Container div would accomplish, but that either isn't right or isn't working because I'm missing something.

HTML of Google Map Embed

<!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="=!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 of the same

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

I've been purposely trying to avoid using JavaScript here because I don't understand it and at least for me (I'm a novice at HTML, not been using it for overly long) is too complicated and doesn't make sense. So, if possible, I'd like to avoid using it here, cause I'm just not at the level to where I'd feel comfortable delving into it yet.

HTML for the Image + Anchor

<!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 for the same thing

.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;
}

HTML of Google Map Embed

<!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 of the same

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

Share Improve this question asked Jan 2 at 4:51 Spiritt 331 silver badge3 bronze badges

Do you really want the image to have those width/height settings? They result in the image becoming distorted at different viewport aspect ratios. – A Haworth Commented Jan 2 at 9:42
Somewhat yes, but I'm only planning to have it rescale to the screen's height as opposed to width to prevent that distortion and keep it at that 16:9 ratio. – Spiritt Commented Jan 2 at 13:43
Can you add the code that does this because it’s important for getting the answer right. You’ll notice that the answer already given positions things correctly over the image but distorts the image. – A Haworth Commented Jan 2 at 13:46
What appears to do that is setting the height in body to 100% through CSS, but not having that prevents it and makes it responsive to width whilst keeping the 16:9 ratio. – Spiritt Commented Jan 2 at 14:34

Add a comment |

1 Answer 1

Sorted by: Reset to default 2

Set the .Container with and height to 100% and position relative. This will make handling the anchor tag position easier.

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

Make the img position in the middle by using left, top, and transform property.

.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;
}

Here is the full snippet.

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>

转载请注明原文地址:http://www.anycun.com/QandA/1746133884a92043.html

html - Making An Image with overlaid anchor tags screen responsive - Stack Overflow

1 Answer 1

htmlMaking An Image with overlaid anchor tags screen responsiveStack Overflow