Nueva propiedad de relación de aspecto de CSS compatible con Chromium, la Vista previa de la tecnología Safari y Firefox Nightly

La nueva propiedad de CSS que ayuda a mantener el espaciado en diseños responsivos.

Una Kravets

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.

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:

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

Para 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

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.