Podemos definir como se comportará una imagen dentro de un contenedor gracias a la propiedad object-fit. La misma nos deja poder adecuar distintos tipos de comportamiento de la imagen o el video a nuestro contenedor. Para ver los ejemplos utilizaremos la siguiente imagen
En un contenedor de 600 de width x 300 de height, viendose asi
La propiedad object-fit posee cuatro valores:
Es el valor por default, la imagen se adapta a su contenedor, no importa si tiene que encogerse. Un ejemplo grafico de fill en acción
_16.55.15.png)
Si, es la misma que la del ejemplo. Esto es asi porque es la opcion por default
En contain la imagen se adapta para poder mantener su aspecto, inclusive si esto significa dejar espacios del contenedor en blanco
_17.00.15.png)
Como ves, los laterales del contenedor estan en blanco porque se priorizó que la escala de la imagen quede igual a la original.
En cover, la escala de la imagen se prioriza como ocurre con contain pero a su vez también se ocupa de no dejar espacios vacios. Entonces lo que hace es reducir la imagen para que pueda entrar en todo el contenedor pero manteniendo su escala.
_17.02.55.png)
Si comparas esta imagen con la imagen de fill, vas a ver que la de fill está mas estirada. Esto es porque no se priorizo la escala y solo se agrandó la imagen. Cover agranda la imagen priorizando la escala.
En none no se tiene en cuenta ni la escala ni el tamaño, la imagen se agrega al contenedor y entra lo que alcance de la misma
_17.05.22.png)
La escala quedo intacta y ni se toco el tamaño. Solo se muestra lo que es posible mostrar debido al tamaño del contenedor.