Estoy tratando de crear un mapa que alinee los hipervínculos de manera receptiva sobre una imagen de fondo (siempre) de pantalla completa.

Probé SVG, pero no funcionó por este motivo .

Así que ahora estoy tratando de usar el posicionamiento absoluto, de modo que x/y Y la altura/anchura del contenedor (y, por lo tanto, los pequeños botones de 'trufa') coincidan con las partes respectivas en la imagen de fondo.

A continuación se muestra la imagen, con la 'caja de trufas' que debe alinearse sobre toda la lata de trufas (se incluye la pantalla superior)

En cambio, lo que tengo es esto (puede ver, la ventana gráfica podría estar cambiando, pero dado que la imagen aún no está disminuyendo de tamaño, tampoco debería hacerlo el elemento 'caja de trufas'):

A continuación se muestra el código que estoy usando para TruffleTin, para que mantenga de manera receptiva la posición x/y, pero no tengo nada para su altura/ancho.

 import React, { useEffect, useRef } from 'react'; import { TruffleTinContainer, TruffleTinOutside, } from '../truffle-tin/styledTruffleTin'; export default function TruffleTin({ backgroundRef }) { const truffleTinRef = useRef(); const initialPos = { x: 150, y: 150 }; const padding = 25; let truffleBoxWidth = 0; let truffleBoxHeight = 0; useEffect(() => { truffleBoxWidth = truffleTinRef.current.offsetWidth; truffleBoxHeight = truffleTinRef.current.offsetHeight; resize(); }, []); function resize() { let backgroundDivRect = backgroundRef.current.getBoundingClientRect(); truffleTinRef.current.style.left = (initialPos.x / truffleBoxWidth) * backgroundDivRect.width - padding + 'px'; truffleTinRef.current.style.top = (initialPos.y / truffleBoxHeight) * backgroundDivRect.height - padding + 'px'; } useEffect(() => { window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize); }); return ( <TruffleTinContainer ref={truffleTinRef}> I'm the truffle tin </TruffleTinContainer> ); }

Y esto es lo que es la imagen, es un div con una imagen de fondo:

 export const BackgroundLightsOn = styled.div` position: absolute; background: url(${BgLightsOn}); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100%; width: 100%; border: 1px solid red; `

Cualquier ayuda sería muy apreciada. He mirado innumerables 'sugerencias' para esto, pero nada ha funcionado hasta ahora. Estoy algo bajo presión aquí, ¡así que la respuesta más directa y efectiva sería la mejor! Muchas gracias.