La nueva propiedad de CSS que ayuda a mantener el espaciado en diseños responsivos.
Relación de aspecto
La relación de aspecto se expresa con mayor frecuencia como dos números enteros y dos puntos en las siguientes dimensiones: ancho:alto o x:y. Las relaciones de aspecto más comunes para la fotografía son 4:3 y 3:2, mientras que los videos, y las cámaras de consumidores más recientes, suelen tener una relación de aspecto de 16:9.
![Dos imágenes con la misma relación de aspecto. Uno es de 634 × 951 px, mientras que el otro es de 200 × 300 px. Ambos tienen una relación de aspecto de 2:3.](https://web.dev/static/articles/aspect-ratio/image/two-images-the-same-aspe-c70cc7ed740f8.jpg?authuser=3&hl=es-419)
Con la llegada del diseño responsivo, mantener la relación de aspecto ha sido cada vez más importante para desarrolladores web, especialmente cuando las dimensiones de las imágenes difieren y los tamaños de los elementos cambian según la disponibilidad espacio.
Estos son algunos ejemplos en los que se vuelve importante mantener la relación de aspecto:
- Crear iframes responsivos, en cuyo caso son el 100% del ancho del elemento superior y la altura debe permanecer una proporción de viewport específica
- Creación de contenedores de marcadores de posición intrínsecos para imágenes, incorporaciones y videos para evitar que se modifique el diseño cuando los elementos se carguen y ocupen espacio
- Creación de un espacio uniforme y responsivo para visualizaciones interactivas de datos o animaciones SVG
- Crea un espacio uniforme y responsivo para componentes multielemento, como tarjetas o fechas del calendario.
- Crear un espacio uniforme y responsivo para múltiples imágenes de diferentes dimensiones (se puede usar junto con
object-fit
)
Ajuste de objetos
Definir una relación de aspecto nos ayuda a ajustar el tamaño del contenido multimedia en un contexto responsivo. Otra herramienta
bucket es la propiedad object-fit
, que permite a los usuarios describir cómo un objeto (como una imagen)
dentro de un bloque debería llenar ese bloque:
![Visualización de demostración de ajuste de objetos](https://web.dev/static/articles/aspect-ratio/image/object-fit-demo-visualiza-6e1b75de8297c.jpg?authuser=3&hl=es-419)
object-fit
. Consulta la demostración en CodePen.Los valores initial
y fill
vuelven a ajustar la imagen para llenar el espacio. En nuestro ejemplo, esto provoca
que la imagen se vea comprimida y borrosa, ya que reajusta los píxeles. No es lo ideal. object-fit: cover
usos
la dimensión más pequeña de la imagen para llenar el espacio y la recorta para que se adapte a ella según esta
dimensión. "Se acerca mucho". en su límite más bajo. object-fit: contain
garantiza que toda la imagen
siempre es visible. Por lo tanto, lo opuesto de cover
, donde toma el tamaño del límite más grande
(en nuestro ejemplo anterior, se trata del ancho) y cambia el tamaño de la imagen para mantener su relación de aspecto intrínseca.
a la vez que encaja en el espacio. El caso de object-fit: none
muestra la imagen recortada en el centro.
(posición predeterminada del objeto) en su tamaño natural.
object-fit: cover
suele funcionar en la mayoría de las situaciones para garantizar una interfaz uniforme y agradable cuando se trabaja.
con imágenes de diferentes dimensiones, sin embargo, se pierde información de esta forma (la imagen se recorta en
sus bordes más largos).
Si estos detalles son importantes (por ejemplo, cuando se trabaja con productos de belleza en una superficie plana), No se acepta recortar el contenido importante. Entonces, el escenario ideal serían imágenes responsivas de diferentes tamaños que se ajusten al espacio de la IU sin recortarse.
El truco antiguo: mantener la relación de aspecto con padding-top
![Usar padding superior para establecer una relación de aspecto de 1:1 en las imágenes de vista previa de la publicación dentro de un carrusel](https://web.dev/static/articles/aspect-ratio/image/using-padding-top-set-1-9702b5487f14c.jpg?authuser=3&hl=es-419)
padding-top
para establecer una relación de aspecto de 1:1 en las imágenes de vista previa de las publicaciones en un carruselPara que sean más responsivas, podemos usar la relación de aspecto. Esto nos permite establecer tamaño de proporción específico y basar el resto del contenido multimedia en un eje individual (altura o ancho).
Una solución multinavegadores actualmente aceptada para mantener la relación de aspecto basada en la imagen
es conocido como "Padding-Top Hack". Esta solución requiere un contenedor superior y una
un contenedor secundario absolutamente ubicado. Se calcularía la relación de aspecto
como un porcentaje para establecer
como padding-top
. Por ejemplo:
- Relación de aspecto de 1:1 = 1 / 1 = 1 =
padding-top: 100%
- Relación de aspecto de 4:3 = 3 / 4 = 0.75 =
padding-top: 75%
- Relación de aspecto de 3:2 = 2 / 3 = 0.66666 =
padding-top: 66.67%
- Relación de aspecto de 16:9 = 9 / 16 = 0.5625 =
padding-top: 56.25%
Ahora que identificamos el valor de la relación de aspecto, podemos aplicarlo a nuestro contenedor superior. Consulta el siguiente ejemplo:
<div class="container">
<img class="media" src="..." alt="...">
</div>
Entonces, podríamos escribir el siguiente CSS:
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.media {
position: absolute;
top: 0;
}
Se mantiene la relación de aspecto con aspect-ratio
![Usar la relación de aspecto para establecer una relación de aspecto de 1:1 en las imágenes de vista previa de la publicación dentro de un carrusel](https://web.dev/static/articles/aspect-ratio/image/using-aspect-ratio-set-e58f152775151.jpg?authuser=3&hl=es-419)
aspect-ratio
para establecer una relación de aspecto de 1:1 en las imágenes de vista previa de las publicaciones dentro de un carrusel.Por desgracia, calcular estos valores de padding-top
no es muy intuitivo y requiere algunos
y el posicionamiento y la sobrecarga adicionales. Con el nuevo CSS intrínseco de aspect-ratio
propiedad, el lenguaje para mantener el aspecto
proporciones es mucho más claro.
Con el mismo lenguaje de marcado, podemos reemplazar padding-top: 56.25%
por aspect-ratio: 16 / 9
, y
aspect-ratio
para una proporción especificada de width
/ height
.
.container { width: 100%; padding-top: 56.25%; }
.container { width: 100%; aspect-ratio: 16 / 9; }
El uso de aspect-ratio
en lugar de padding-top
es mucho más claro y no remodela el padding.
haga algo fuera de su alcance habitual.
Esta nueva propiedad también agrega la capacidad
establece la relación de aspecto en auto
, donde "los elementos reemplazados por una relación de aspecto intrínseca usan ese aspecto
proporción; De lo contrario, la caja no tendrá una relación de aspecto preferida". Si tanto auto
como <ratio>
son
juntos, la relación de aspecto preferida es la que se especifica de width
dividida por height
, a menos que
es un elemento reemplazado con
una relación de aspecto intrínseca, en cuyo caso se usa esa relación de aspecto en su lugar.
Ejemplo: coherencia en una cuadrícula
Esto también funciona muy bien con mecanismos de diseño CSS como CSS Grid y Flexbox. Piensa en una lista con publicadores secundarios que quieras mantener una relación de aspecto de 1:1, como una cuadrícula de íconos de patrocinadores:
<ul class="sponsor-grid">
<li class="sponsor">
<img src="..." alt="..."/>
</li>
<li class="sponsor">
<img src="..." alt="..."/>
</li>
</ul>
.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.sponsor img {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;
}
Ejemplo: Evitar el cambio de diseño
Otra gran función de aspect-ratio
es que puede crear espacio de marcador de posición para evitar
Cambio de diseño acumulado y mejores Métricas web En esta primera
ejemplo, cargar un elemento desde una API como Unsplash crea un
cambio de diseño cuando se termine de cargar el contenido multimedia.
Por otro lado, el uso de aspect-ratio
crea un marcador de posición para evitar este cambio de diseño:
img {
width: 100%;
aspect-ratio: 8 / 6;
}
Sugerencia adicional: Atributos de imagen para la relación de aspecto
Otra forma de establecer la relación de aspecto de una imagen es con los atributos de imagen. Si conoces las dimensiones de la imagen con anticipación, una práctica recomendada es
Establecer estas dimensiones como sus width
y height
En nuestro ejemplo anterior, si sabemos que las dimensiones son de 800 px por 600 px, el lenguaje de marcado de la imagen se vería así: <img src="image.jpg"
alt="..." width="800" height="600">
. Si la imagen enviada tiene el mismo aspecto
pero no necesariamente los valores exactos de los píxeles,
atributos para establecer la proporción, combinados con un estilo de width: 100%
, de modo que
que la imagen ocupe el espacio adecuado. Todo esto se vería de la siguiente manera:
<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
}
Al final, el efecto es el mismo que establecer aspect-ratio
en la
con CSS, y se evita el cambio de diseño acumulativo (consulta la demostración en
CodePen).
Conclusión
Con la nueva propiedad aspect-ratio
de CSS, que se lanzará en varios navegadores modernos y mantiene las
relaciones de aspecto en tus contenedores
de contenido multimedia y de diseño.
Fotos de Amy Shamblen y Lionel Gustave a través de Unsplash.