Una de las caracteristicas mas importantes de las imegnes es que sean resposivas, es decir que la imagen se vaya adaptando al contenedor o tamaño de la pantalla.
Las imagenes son un elemento de línea.
Cuando necesitamos que las imágenes deban tener en el navegador un tamaño especifico pero la imagen original no es de ese tamaño vamos a tener un problema de deformacion de la imagen, pero lo que poedemos hacer par solucionar esto es utilizar dos propidades que son:
object-fit: Esta propiedad se parece mucho a la propiedad
background-size que tiene dos valores cover y
contain y aplican los mismos principios. object-fit es fill que
trata de ajustar las dimensiones de la imagen al tamño que le hemos
especificado sin contar su proporción, pero deforma la imágen.
object-position: