manteniendo la relación de aspecto en los elementos DIV de resolución automática

al crear un elemento DIV resizable que permanezca centrado en la pantalla, es importante asegurarse de que su relación de aspecto se mantenga, lo que respecta a los cambios en el tamaño de las ventanas. Esto se puede lograr usando técnicas CSS.

CSS Solución:

La propiedad de relación de aspecto proporciona una solución simple para mantener la relación de aspecto en el cambio de tamaño de los elementos DIV. El siguiente código CSS demuestra cómo lograr esto:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}

.stage {
  --r: 960 / 540;  // Define the desired aspect ratio (width / height)

  aspect-ratio: var(--r);  // Set the aspect ratio
  width:min(90%, min(960px, 90vh*(var(--r))));  // Set the maximum width and height while preserving ratio

  display: flex;
  justify-content: center;
  align-items: center;

  background: 
    linear-gradient(30deg,red 50%,transparent 50%),  // Add a gradient to visualize the preserved aspect ratio
    chocolate;
}

explicación:

• La propiedad de ratio de aspecto establece la relación de aspecto deseada para el elemento, que se calcula en base a los valores de videos y de altura iniciales (960px y 540px, respectivamente). restricciones especificadas:

• un máximo de 90% del ancho disponible

  un máximo de 960px
  un ancho que mantiene la relación de aspecto en relación con la altura disponible (90VH multiplicada por var (-r)
  • [&] agregado para demostrar visualmente que la relación de aspecto se mantiene, ya que el ángulo del gradiente permanece constante independientemente de los cambios en las dimensiones del elemento.
  d. Esta solución funciona de manera efectiva para cambiar el tamaño del ancho y la altura del elemento.