He creado un rastreador de cartas para un juego.

Se basa en un patrón de cuadrícula de diferentes divs que se superponen a una imagen de fondo. Dentro de estos divs hay imágenes más pequeñas que representan las tarjetas y se pueden arrastrar de un div al siguiente.

Me gustaría que los div se escalaran con la ventana, pero deben conservar su relación de aspecto para que aún se superpongan a las partes correctas de la imagen de fondo a medida que se escala.

Puedo hacer que esto funcione usando "padding-top" para los divs; sin embargo, esto hace que el más pequeño aparezca en la parte inferior de ese div y extiende el div, y evita que se arrastren y no puedo ver por qué tiene este efecto.

¡Muchas gracias de antemano por cualquier ayuda!

Aquí hay un ejemplo de div sin padding-top aplicado:

 #div33 { position: absolute; top: 250px; left: 542px; width: 270px; height: 350px; margin: 2px; padding: 2px; background-color: rgba(255, 184, 53, 0.); }

Los elementos arrastrables:

 .draggable { padding: 0px; background-color: rgba(255, 255, 255, 0); cursor: move; padding: 1px; } .draggable.dragging { opacity: .1; }

y el script para arrastrar y soltar:

 <script> const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset) { return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY }).element } </script>