object-fit: esta propiedad es usada en caso que queramos definir el tamaño de las etiquetas de img o de video para que se ajuste a su contenedor.
Valores
- fill
- contain
- cover
- none
- scale-down
fill: este es el valor por defecto, estira la imagen para que se ajuste al cuadro de contenido, independientemente de su relación de aspecto.
contain:aumenta o disminuye el tamaño de la imagen para llenar el cuadro conservando su relación de aspecto.
cover:la imagen llenará el alto y el ancho de su caja, una vez más manteniendo su relación de aspecto pero a menudo recortando la imagen en el proceso.
none:la imagen ignorará la altura y el ancho del elemento primario y conservará su tamaño original.
scale-down:la imagen comparará la diferencia entre none y contain para encontrar el tamaño de objeto concreto más pequeño.
Podemos ver ejemplos con la herramienta de object-fit(Pulse aquí)
También podemos usar la propiedad object-position, con esta propiedad indicando la coordenadaX y la coordenadaY en % se posicionará la imagen en nuestro contenedor.
Ejemplo
- object-position: 100% 50%;
- object-position: -20% 50%;
- object-position: 20% 120%;