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
selector {
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:
<p>
<button>Click</button>
</p>
button {
aspect-ratio: auto;
background-color: #9DDFA4;
padding: 1em;
}
:
Ejemplo
Y ahora establezcamos la relación de aspecto para el botón
como 1/2:
<p>
<button>Click</button>
</p>
button {
aspect-ratio: 1/2;
background-color: #9DDFA4;
padding: 1em;
}
:
Véase también
-
la propiedad
object-fit,
que escala elementos
