Garantizar la preservación de la relación de aspecto en la ventana gráfica

En diseño web, mantener la relación de aspecto de los elementos mientras se adapta a las dimensiones variables de la ventana gráfica es crucial. Esto garantiza la coherencia en diferentes tamaños y orientaciones de pantalla. Para lograr esta preservación específicamente cuando se trata de un elemento cuadrado, se puede implementar el siguiente enfoque CSS:

Utilizando la propiedad de relación de aspecto

A partir de 2022, el aspecto La propiedad -ratio ofrece una solución sólida para controlar la relación de aspecto de los elementos. Al especificar la relación ancho-alto deseada, esta propiedad adapta el tamaño del elemento para mantener la relación especificada. Fundamentalmente, la adaptación del tamaño está limitada por la dimensión más pequeña de la ventana gráfica, lo que cumple con el requisito de ajustar dinámicamente tanto la orientación horizontal como la vertical.

Ejemplo de implementación

Para demostrar Para conocer la funcionalidad de la propiedad de relación de aspecto, se puede utilizar el siguiente código:

Aspect ratio 1:1
Aspect ratio 1:19

.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

En este ejemplo, se crean dos divs con distintas relaciones de aspecto (1:1 y 16:9). La propiedad de relación de aspecto garantiza que, independientemente de la orientación del dispositivo, estos divs mantengan la forma y el tamaño deseados dentro de la ventana gráfica. Además, sus dimensiones se ajustan para adaptarse a la dimensión más pequeña de la ventana gráfica, lo que garantiza que se conserve la forma cuadrada.