CODEWITHSUNDEEP
htmlcss
Marox
Marox

Reputation: 359

How can I make multiple smaller images resize by the same amount as a big image under them

I have one big image (let's say it's a map) and multiple smaller images (points on the map) that are shown on this image on hover event. Currently I'm positioning smaller images with position: absolute but when I got to the point where the screen width forces my big image to resize, smaller images are not placed where I want them to be. How can I make this work using CSS and not making this images too big so the user can hover only on the exact image I want them to hover?

Upvotes: 1

Views: 54

Answers (1)

Michael Nelles
Michael Nelles

Reputation: 5992

  1. get the image sizes
  2. two set listener for resize
  3. when resize is triggered get ratio
  4. use the ratio to resize the
  5. smaller images
    var startWidth = 0;

    document.addEventListener('DOMContentLoaded', function () {
         var el = document.getElementById("the-img");
         startWidth = el.offsetWidth;
         // use offSetWidth & offSetHeight to get the dimension of your smaller image(s) 
    }

    window.addEventListener('resize', getRatio);

    function getRatio(){
         var el = document.getElementById("the-img");
         ratio = startWidth/el.offsetWidth;

         var smallerImgWid = ratio * orginialSmallImgWid;
         var smallerImgHeigh = ratio * origonalSmallImgHeight;
    }

Upvotes: 2

Related Questions