Object-fit

Es utilizado para mejorar los objetos que en este caso es una imagen ya que cuando se usa height: %.

Contain:

Contein hace que las resoluciones de la imagen se ajuesten al contenido .

Cover la imagen se ajusta al contenedor y recorta los demas bordes.

None hace que object-fit use las propiedades por defecto es decir utiliza la resolucion original.

Scale-Down elije la opcion con mas baja resolu cion si contain tene mas baja resolucion lo elige o si es por ejemplo none lo elije.

Con object-position cambiamos la pocision del objeto dentro de su respectiva caja.

Utilizando la propiedad left movemos la imagen de izquierda a derecha.

Utilizando la propiedad right movemos la imagen de derecha a izquierda.

Utilizando la propiedad top movemos la imagen de hacia arriba.

Utilizando la propiedad bottom movemos la imagen hacia abajo.

Utilizando em movemos la imagen hacia la derecha o izquierda dependiendo si es positivo o negativo el valor del em.

Por ejemplo aqui ponemos 2 em.

Aqui ponemos -3 em.

Aqui ponemos -2 em a la izquierda y 5em de arriba hacia abajo (si al revez solo cambiamos el valor de 5 em a negativo).