Así que me encontré con un problema al tratar de hacer clic en los objetos de una imagen. Tengo una imagen con 3 objetos que quiero vincular a 3 páginas diferentes/ejecutar 3 funciones diferentes al hacer clic.

Ahora mi problema ocurre cuando cambio el tamaño de mi ventana. La imagen tiene el siguiente estilo para mostrar siempre los objetos, incluso si cambio el tamaño de la ventana y lleno toda la pantalla.

 img { object-fit: cover; object-position: center; width: 100%; height: calc(100vh - 90px); }

Dado que los objetos son bastante grandes y cuando cambio el tamaño, digamos en la vista móvil, los enlaces se superpondrán y serán más grandes que la pantalla misma.

Esta es la estructura HTML actual, que puedo cambiar.

 <div> <img src="img/steintafelAussen.jpg" alt="Kircheneingang" /> <div class="buttons"> <button class="btn-1"></button> <button class="btn-2"></button> <button class="btn-3"></button> </div> </div>

Ahora mi pregunta es, ¿sería posible asignar los tamaños y las posiciones de los botones a la imagen, que se reescalen automáticamente, o necesitaría usar consultas de medios para lograrlo?

Estaba pensando en rastrear la escala inicial de la imagen de alguien y aplicarla a los enlaces con transform: scale(); , ¿quizás?

¿Puedo usar un SVG transparente que se coloca sobre la imagen, tiene 3 objetos con eventListeners en lugar de enlaces?

Usar JS está bien, ya que es una aplicación vue 3.