So I would like to understand, what is the difference between object-fit: contain and max-width: 100%; max-height: 100% ?
As I see, in the first case we set two dimensions of the image to fixed 100% and specify object-fit: contain; rule. In the second case we add two rules max-width and max-height accordingly. The effect is, in both cases, that we get an image fitted in the box dimensions saving its aspect ratio.
to better understand it try the following in the second example
change the height and width to be max-height and max-width and notice how it ignore that cover option and they look identically
so max-width force the browser to not scale the image more than it actual size
but height :100% and width :100% will make the image to have 100% of it size so it will not scale up or down but it could be cropped like the what happened in the cover one
try to play with different value like use max with other object-fit and other time to use 100% with object-fit
and we are getting a picture which is being constrained by a box while maintaining its proportions and not being larger than its 100% scale. Don’t we get the same when using contain property? The only difference I see the picture is changing its position within the box. It’s not the “letterboxing” effect but the picture becomes sticked to the top border of the box.
they could look similar depend on the case when you use the max-width it tell the browser that it can scale it up to 100% but not more so when the container set to cover it keep scale it up it still can not break the max-width rule
now why cover start draw the picture from the top left corner cause the browser know in advance that it will cover the whole area so it start there even that in some cases like our case here when the max-width set it does not make it go beyond certain scale to maintain the aspect ratio
now try to use a portreit image using the inspector try to replace the image with that one
