¿Alguien tiene alguna idea de cómo puedo obtener una escala proporcional, tanto en ancho como en alto? Tengo un contenedor DIV con la siguiente configuración:
<style> #container { width: 100%; height:calc(100vw * 1.72); background:red; } </style> <div id="container"></div>Cuando ajusto el ancho de la ventana del navegador, el área se escala. Sin embargo, no se escala cuando ajusto la altura de la ventana del navegador.
¿Hay una solución CSS simple para esto?
prueba la relación de aspecto
width:100%; aspect-ratio:1;Tenga en cuenta que la relación de aspecto no funciona con todos los navegadores. Visite la descripción de Mozilla sobre la relación de aspecto para ver los navegadores compatibles
Puede escalar proporcionalmente un elemento dando a su elemento secundario un valor de porcentaje padding-top en la proporción que desee. El siguiente ejemplo tiene un elemento con una altura que es 2 veces el ancho de su padre.
Más detalles sobre la técnica aquí .
.container { width: 20%; /* pick whatever width you want */ background-color:red; } .container .outer { width: 100%; padding-top: 200%; /* defines aspect ratio */ position: relative; } .container .outer .inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } <div class="container"> <div class="outer"> <div class="inner">Your content</div> </div> </div>