How to keep anchors in the same position on an Image when scaling window size

user_18013328 0
Viewed 64

Image in question

On my website I want to place images that link to social medias inside the circles in this image. I can place them manually, but I'm not sure how to keep them on the circles when the browser window changes size. The image above will scale down as the window gets smaller, but the links will not stay where the circles are. Is there a way to accomplish this with just placing the anchor elements on the image?

css html javascript
2 Answers

A possible solution is to use % to set the percentage for the position based on the percentage of screen height and screen width.

Example may work for your code:

img{
width:50vw;
height:50vh
}
div{
position: absolute;
top:20%;
left:20%;
}
<img src='https://i.stack.imgur.com/zgnFR.jpg'>
<div>Hope this helps</div>

You could try zoom in and zoom out, then you will find out it always stay at the specific position.

Or you could use use css media rule to help you.

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Check more here.

user_177436470

By placing a div with the background image being the planet, and adding my links I was able to keep the images to scale in the correct place.

HTML code:

        <div class="burning-planet">
            <a target="blank" style="text-decoration: none" href="https://twitter.com/">
              <img class="twitter" alt="" src="images/twitter-logo.png">
            </a>
            <a target="blank" style="text-decoration: none" href="https://instagram.com">
              <img class="instagram" alt="" src="images/instagram-logo.png">
            </a>
            <a target="blank" style="text-decoration: none" href="https://medium.com/">
              <img class="mediumLogo" alt="" src="images/medium-logo.png">
            </a>
        </div>

CSS Code:

.burning-planet{
width:700px;
  height:500px;
  background-image: url("https://i.stack.imgur.com/zgnFR.jpg");
  background-size: 100%;
}

.twitter {
  position:relative;
  width: 4.1rem;
  height: 4.1rem;
  top: 19.5%;
  left: -37.8%;
}

.mediumLogo {
  position:relative;
  width: 3.8rem;
  height: 3.8rem;
  top: 38.5%;
  left: -14.5%;
}

Here is how it works in the browser, when you add new links the other ones become a bit off again but you can just play with the percentages to get back into place. jsFiddle

user_180133280
Related