htmlcssresponsive-designresponsive-images

Making An Image with overlaid anchor tags screen responsive

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="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;
}

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="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;
}

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.

Solution

  • 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>