Question

0

176

Views

Transform dom elements to match an image regardless of its deformations

I want to have an image on page with DIVs sitting at the same place relative to the image even when the image gets stretched. Basically, I know the position the stars should take in the original picture, however I dont know how to move them such that they stand in the right place.

Here I explain with a picture :

Here is my HTML markup. The .slide-point elements are the red stars:

let points = document.querySelectorAll(".slide-point");

points.forEach(point => {
  const x = point.dataset.x;
  const y = point.dataset.y;
  const h = point.dataset.h;
  const w = point.dataset.w;

  let image = point.closest(".slide").querySelector("img");
  let natH = image.naturalHeight;
  let natW = image.naturalWidth;

  let clientH = image.clientHeight;
  let clientW = image.clientWidth;


  point.style.left = x * clientW / natW + "px";
  point.style.top = y * clientH / natH + "px";
  point.style.width = w;
  point.style.height = h;
});

.slide-point {
  position: absolute;
  background: red;
}

.slide>img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

<ul data-slides>
  <li class="slide" data-active>
    <div class="slide-point" data-x="240" data-y="2295" data-h="165" data-w="165">&#9733;</div>
    <div class="slide-point" data-x="512" data-y="2155" data-h="165" data-w="165">&#9733;</div>
    <img id="slide-img" src="https://via.placeholder.com/800" alt="Photo1">
  </li>
</ul>

Obviously, as soon as I resize the page, the stars don't align with the image anymore.

Thank you in advance !

about 4 years ago · Juan Pablo Isaza

Answer question

0

176

Transform dom elements to match an image regardless of its deformations

Find remote jobs

Andres GPT