⌘K

Propiedad aspect-ratio

La propiedad aspect-ratio establece la alineación de los elementos a lo largo del eje transversal para bloques flex y a lo largo del eje horizontal para grids. Se aplica al elemento padre.

Sintaxis

cssselector {
  aspect-ratio: auto o relación;
}

Valores

Valor Descripción
auto El elemento no tiene una relación de aspecto preferida y el navegador la establece automáticamente, basándose en el ancho y alto del elemento.
relación La relación se escribe en la forma 16/9, aquí el primer número es el ancho, y el segundo número - el alto. Si algún valor no se especifica, se considera igual a 1. También algunas relaciones se pueden escribir con un solo número. Por ejemplo, 2/1 se puede escribir como 0.5, esto dará el mismo resultado.
auto && relación Si la relación de aspecto va junto con la palabra clave auto (ejemplo: auto 1/2), se elegirá la relación especificada, pero para elementos reemplazados (como imágenes y videos) con su propia relación de aspecto solo se utilizará esta última.

Ejemplo

Establezcamos la relación de aspecto automática para un botón: 

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Ejemplo

Y ahora establezcamos la relación de aspecto para el botón como 1/2: 

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Véase también

BackPropiedad resizeNextPropiedad object-fit