La propiedad object-fit especifica cómo se debe comportar un elemento respecto a su contenedor. Diseñado para imágenes, videos y otros formatos de multimedia.
object-fit permite modificar el elemento, dando control sobre como se reduce o estira respecto a su contenedor.
<img src="image.jpg" />
img {
width: 400px;
height: 400px;
object-fit: cover;
}
Permite la configuración entre cinco distintos valores:
contain
Aumenta o disminuye el tamaño para llegar al contenedor, conservando la relación de aspecto. Es decir, el elemento completo se sigue visualizando, pero, se adapta al tamaño especificado.
img {
width: 400px;
height: 400px;
border: 2px solid white;
object-fit: contain;
}
cover
Se adapta al ancho y altura del contenedor, manteniendo la relación de aspecto. Si la relación de aspecto no coincide con la del contenedor, entonces se realiza un recorte para rellenar el mismo.
img {
width: 400px;
height: 400px;
border: 2px solid white;
object-fit: cover;
}
fill
El valor por defecto de los elementos.
Cambia el elemento para que se ajuste al contenedor, si la relación de aspecto no coincide, este se estira para rellenar todo el contenedor.
img {
width: 400px;
height: 400px;
border: 2px solid white;
object-fit: fill;
}
none
El elemento ignora la altura y el ancho del contenedor, conservando su tamaño original, sin redimensionar el elemento.
img {
width: 400px;
height: 400px;
border: 2px solid white;
object-fit: none;
}
scale-down
El elemento se dimensiona como si none o contain se especificaran, para encontrar el tamaño de objeto concreto más pequeño.
img {
width: 400px;
height: 400px;
border: 2px solid white;
object-fit: scale-down;
}