Mantener la relación de aspecto de un div con CSS
Quiero crear una respuesta divque pueda cambiar su ancho/alto a medida que cambia el ancho de la ventana.
¿Existe alguna regla CSS que permita que la altura cambie según el ancho, manteniendo su relación de aspecto ?
Sé que puedo hacer esto a través de JavaScript, pero preferiría usar solo CSS.
Simplemente cree un contenedor <div>con un valor porcentual para padding-bottom, como este:
.demoWrapper {
padding: 10px;
background: white;
box-sizing: border-box;
resize: horizontal;
border: 1px dashed;
overflow: auto;
max-width: 100%;
height: calc(100vh - 16px);
}
div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}<div class="demoWrapper">
<div></div>
</div>Resultará en una <div>altura igual al 75% del ancho de su contenedor (una relación de aspecto de 4:3).
Esto se basa en el hecho de que para el relleno:
El porcentaje se calcula con respecto al ancho del bloque contenedor del cuadro generado [...] (fuente: w3.org , énfasis mío)
Valores de relleno inferior para otras relaciones de aspecto y 100% de ancho:
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
Colocar contenido en el div:
Para mantener la relación de aspecto del div y evitar que su contenido lo estire, debe agregar un elemento secundario en posición absoluta y estirarlo hasta los bordes del envoltorio con:
div.stretchy-wrapper {
position: relative;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Aquí hay una demostración y otra demostración más detallada.
Hay varias formas de especificar una relación de aspecto fija en un elemento como un div, aquí hay 2 de ellas:
1. La aspect-ratiopropiedad CSS
div {
aspect-ratio: 1 / 1;
width: 50%;
background: teal;
}<div>aspect-ratio: 1 / 1;</div>Ésta es la solución más sencilla y flexible . Especifica directamente una relación de aspecto fija de ancho a alto (o alto a ancho) para un elemento. Esto significa que también puede especificar una relación de aspecto según la altura de los elementos .
No depende del ancho principal (como la técnica de relleno) o del tamaño de la ventana gráfica (como la siguiente vwtécnica de unidad), sino del propio ancho o alto del elemento. Más información en MDN . Eso es lo que lo hace tan poderoso en comparación con otras soluciones.
Esta es una propiedad moderna (2021). Todos los navegadores modernos lo admiten; consulte caniuse para obtener compatibilidad precisa con el navegador .
A continuación se muestran algunos ejemplos con diferentes relaciones de aspecto:
.ar-1-1 {aspect-ratio: 1 / 1;}
.ar-3-2 {aspect-ratio: 3 / 2;}
.ar-4-3 {aspect-ratio: 4 / 3;}
.ar-16-9 {aspect-ratio: 16 / 9;}
.ar-2-3 {aspect-ratio: 2 / 3;}
.ar-3-4 {aspect-ratio: 3 / 4;}
.ar-9-16 {aspect-ratio: 9 / 16;}
/** For the demo : **/
body {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
}
div {
background: teal;
width: 23%;
margin:1%;
padding:20px 0;
box-sizing: border-box;
color:#fff;
text-align:center;
}<div class="ar-1-1">aspect-ratio: 1 / 1;</div>
<div class="ar-3-2">aspect-ratio: 3 / 2;</div>
<div class="ar-4-3">aspect-ratio: 4 / 3;</div>
<div class="ar-16-9">aspect-ratio: 16 / 9;</div>
<div class="ar-2-3">aspect-ratio: 2 / 3;</div>
<div class="ar-3-4">aspect-ratio: 3 / 4;</div>
<div class="ar-9-16">aspect-ratio: 9 / 16;</div>2. Usando vwunidades:
Puede utilizar vwunidades tanto para el ancho como para el alto del elemento. Esto permite conservar la relación de aspecto del elemento, según el ancho de la ventana gráfica .
vw: 1/100 del ancho de la ventana gráfica. [ MDN ]
Alternativamente, también puede usar vhpara la altura de la ventana gráfica, o incluso vmin/ vmaxpara usar la menor/mayor de las dimensiones de la ventana gráfica (discusión aquí ).
Ejemplo: relación de aspecto 1:1
div {
width: 20vw;
height: 20vw;
background: gold;
}<div></div>Para otras relaciones de aspecto, puede utilizar la siguiente tabla para calcular el valor de altura según el ancho del elemento:
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
Ejemplo: cuadrícula 4x4 de divs cuadrados
body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div {
width: 23vw;
height: 23vw;
margin: 0.5vw auto;
background: gold;
}<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>Aquí hay un violín con esta demostración y aquí hay una solución para crear una cuadrícula responsiva de cuadrados con contenido centrado vertical y horizontalmente .
El soporte del navegador para unidades vh/vw es IE9+, consulte canIuse para obtener más información.
Utilice la aspect-ratiopropiedad CSS
<div class='demo'></div>
.demo {
background: black;
width: 500px;
aspect-ratio: 4/3;
}
