Mantener la relación de aspecto de div según la altura

Necesito mantener el ancho de un elemento como un porcentaje de su altura . Entonces, a medida que la altura cambia, el ancho se actualiza.

Lo contrario se puede lograr utilizando un valor de% para el relleno de la parte superior, pero el relleno de la izquierda como un porcentaje será un porcentaje del ancho de un objeto, no su altura.

Entonces con un marcado como este:

Me gustaría usar algo como esto:

 .box { position: absolute; margin-top: 50%; bottom: 0; } .inner { padding-left: 200%; } 

Para garantizar que la relación de aspecto de la caja se mantenga de acuerdo con su altura . La altura es fluida debido a su% de margen: a medida que la altura de la ventana cambia, la altura de la caja también lo hará.

Sé cómo lograr esto con JavaScript, solo me pregunto si hay una solución limpia solo de CSS.

Puede usar una imagen que tenga las proporciones deseadas para ayudar con el tamaño proporcional (las imágenes se pueden escalar proporcionalmente configurando una dimensión en un valor y otra en automático). La imagen no tiene que ser visible, pero debe ocupar espacio.

 .box { position: absolute; bottom: 0; left: 0; height: 50%; } .size-helper { display: block; width: auto; height: 100%; } .inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 153, .8); } 
 
1. box has fluid height
2. img has 2:1 aspect ratio, 100% height, auto width, static position
2.1 it thus maintains width = 200% of height
2.2 it defines the dimensions of the box
3. inner expands as much as box

Puede usar unidades vh para la altura y el ancho de su elemento para que ambos cambien según la altura de la ventana gráfica .

vh 1/100 de la altura de la ventana gráfica. ( MDN )

MANIFESTACIÓN

 .box { position: absolute; height:50vh; width:100vh; bottom: 0; background:teal; } 
 

El truco de CSS que escribió, funciona bastante bien para mantener la relación width / height en un elemento. Se basa en la propiedad de padding que, cuando su valor está en porcentaje, es proporcional al ancho principal, incluso para el padding-top y el padding-bottom .

No hay propiedad de CSS que pueda establecer un tamaño horizontal proporcionalmente a la altura del elemento principal. Entonces creo que no hay una solución de CSS limpia.

No puedo encontrar una solución pura de CSS. Aquí hay una solución que usa la biblioteca JavaScript de CSS Element Queries .

 var aspectRatio = 16/9; var element = document.querySelector('.center'); function update() { element.style.width = (element.clientHeight * aspectRatio) + 'px'; } new ResizeSensor(element, update); update(); 

¡Demo de CodePen!

    Intereting Posts