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%;