0
173
VistasTransforme elementos dom para que coincidan con una imagen independientemente de sus deformaciones
Quiero tener una imagen en la página con DIV ubicados en el mismo lugar en relación con la imagen , incluso cuando la imagen se estira. Básicamente, sé la posición que deben tomar las estrellas en la imagen original, sin embargo, no sé cómo moverlas para que queden en el lugar correcto.
Aquí lo explico con una imagen:
Aquí está mi marcado HTML. Los elementos .slide-point son las estrellas rojas:
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">★</div> <div class="slide-point" data-x="512" data-y="2155" data-h="165" data-w="165">★</div> <img id="slide-img" src="https://via.placeholder.com/800" alt="Photo1"> </li> </ul>Obviamente, tan pronto como cambio el tamaño de la página, las estrellas ya no se alinean con la imagen.
Gracias de antemano !
·
Juan Pablo Isaza
Responde la pregunta