Cómo - Relación de aspecto
Aprende a mantener la relación de aspecto de un elemento con CSS.
Relación de aspecto
Cree elementos flexibles que mantengan su relación de aspecto (4:3, 16:9, etc.) cuando cambien de tamaño:
¿Qué es la relación de aspecto?
La relación de aspecto de un elemento describe la relación proporcional entre su ancho y su altura. Dos relaciones de aspecto de video comunes son 4: 3 (el formato de video universal del siglo XX) y 16: 9 (universal para televisión HD y televisión digital europea, y predeterminado para videos de YouTube).
Cómo - Altura igual al ancho
Paso 1) Agregar HTML:
Usa un elemento contenedor, como <div>, y si quieres texto dentro de él, agrega un elemento secundario:
Ejemplo
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Paso 2) Agregar CSS:
Agregue un valor porcentual para padding-top
mantener la relación de aspecto del DIV. El siguiente ejemplo creará una relación de aspecto de 1:1 (la altura y el ancho siempre son iguales):
Ejemplo Relación de aspecto 1:1
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Otras relaciones de aspecto:
Ejemplo Relación de aspecto 16:9
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Ejemplo 4:3 Relación de aspecto
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Ejemplo 3:2 Relación de aspecto
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Ejemplo 8:5 Relación de aspecto
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}