Ajuste de Objetos CSS
La propiedad object-fit del CSS es usada para especificar como una imagen o video debe cambiar su tamaño de acuerdo a su contenedor.
La propiedad object-fit del CSS
Esta propiedad object-fit le dice al contenido que rellene el contenedor de varias maneras, como preservar la proporción del aspecto o estirarse y ocupar tanto espacio como sea posible.
Las dimensiones de la siguiente imagen es de 400x300 pixeles:
Sin embargo, si se le da estilo a esta imagen de 200x400 pixeles, lucirá como se muestra a continuación:
img {
width: 200px;
height: 400px;
}
Como podemos ver la imagen es comprimida para ajustarse a las dimensiones de 200x400 pixeles, y la proporción del aspecto es distorsionado.
Si se usa object-fit: cover; esto cortara los lados de la imagen, preservando la proporción del aspecto, y llenando el espacio, como se muestra a continuación:
img {
width: 200px;
height: 400px;
object-fit: cover;
}
En el siguiente ejemplo tenemos dos imagenes con ancho del 50%, altura del 100% y no usamos object-fit, cuando la ventana del navegador cambia de tamaño; la proporción del aspecto de la imagen es distorcionado:
En el siguiente ejemplo, si usamos object-fit: cover; así cuando la ventana del navegador cambia de tamaño; la proporción del aspecto de la imagen es preservada:
Los valores de la propiedad object-fit
La propiedad object-fit puede tener los siguientes valores:
| Valor | Descripción |
|---|---|
fill |
Valor predeterminado. El contenido remplazado es ajustado para llenar el cuadro del contenido del elemento. Si es necesario, el objeto será estirado o aplastado para llenar. |
contain |
El contenido remplazado es escalado para mantener su proporción de aspecto mientras se ajusta dentro de la caja de contenido del elemento. |
cover |
El contenido remplazado es ajustado para mantener su proporción de aspecto mientras llena contenido de la caja del elemento. |
none |
El contenido remplazado no se ajustado. |
| scale-down | El contenido es ajustado como si ningún contenedor fuera especificado contenido, lo que daría como resultado un tamaño de objeto concreto más pequeño. |
A continuación se muestra los posibles valores de la propiedad object-fit:
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.scale-down { object-fit: scale-down; }
.none { object-fit: none; }