Definición de .object-fit en CSS
La propiedad .object-fit define cómo un elemento responde a la altura y el ancho de su cuadro de contenido. Está destinado a imágenes, videos y otros formatos de medios integrables junto con la propiedad de posposición de objetos. Utilizado por sí mismo, .object-fit nos permite recortar una imagen en línea dándonos un control de grano fino sobre cómo cubre y se extiende dentro de su caja.
Ejemplo de uso : propiedad CSS object-fit
Si te gustaría utilizar esta propiedad de CSS en tu stylesheet, hazlo de esta forma:
img {
height: 120px;
}
.cover {
width: 260px;
object-fit: cover;
}Otro ejemplo más avanzado de .object-fit es el siguiente de CODEPEN:
Sintaxis de .object-fit en CSS
object-fit: fill|contain|cover|scale-down|none|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| llenar | Esto es predeterminado. El contenido reemplazado se dimensiona para llenar el cuadro de contenido del elemento. Si es necesario, el objeto se estirará o aplastará para que quepa | |
| contener | El contenido reemplazado se escala para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento. | |
| cubrir | El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena todo el cuadro de contenido del elemento. El objeto se recortará para que quepa | |
| ninguna | El contenido reemplazado no cambia de tamaño | |
| reducción de escala | El tamaño del contenido es como si no se hubiera especificado ninguno o contener (daría como resultado un tamaño de objeto concreto más pequeño) | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .object-fit
Los números de la tabla especifican la primera versión del navegador que es absolutamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
