Atributo aspect-ratio CSS

definición y uso

aspect-ratio propiedad le permite definir la proporción entre el ancho y la altura del elemento.

si se establece aspect-ratio y ancho propiedad, la altura se ajustará según la proporción de aspecto definida.

Para entender mejor aspect-ratio propiedad, consulte la demostración.

sugerencia:usado en diseño responsivo aspect-ratio Esta propiedad, cuando el tamaño del elemento cambia con frecuencia, desea mantener la proporción entre el ancho y la altura.

ejemplo

ejemplo 1

Añadir proporción de ancho y alto al elemento:

div {
  aspect-ratio: 3 / 2;
}

pruebe usted mismo

ejemplo 2

si el tamaño del elemento div necesita cambiar,aspect-ratio Esta propiedad es muy adecuada para controlar la proporción de ancho y alto de los elementos div. Por ejemplo, en una biblioteca de imágenes, desea que el tamaño del elemento div sea flexible para adaptarse a todos los dispositivos, pero al mismo tiempo mantener la proporción de aspecto de las imágenes:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>pasillo</div>
  <div>flores a lo largo de la calle</div>
  <div>montañas</div>
  <div>Cinque Terre</div>
</div>

pruebe usted mismo

sintaxis de CSS

aspect-ratio: number/number|initial|inherit;

valor de la propiedad

detalles técnicos

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la propiedad.

páginas relacionadas

tutoriales:Módulo de diseño de rejilla de CSS

referencia:Atributo Object-fit de CSS

referencia:Atributo Object-position de CSS