Object-fit: contain VS max-width: 100%; max-height: 100%

MDN Learn
,
#1

Hello,

In the article Images, media, and form elements and Sizing items in CSS is described a problem concerning sizing of the images in relation to the boxe’s size they are in.

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.

ice_screenshot_20211009-185810
ice_screenshot_20211009-185810709×769 111 KB
ice_screenshot_20211009-183948
ice_screenshot_20211009-183948698×818 59.3 KB

#2

Hello @DenisM

contain will make the image be displayed inside the container but max-width force the image to not scale up more that 100% of it’s original size

check this https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit for more about the object-fit

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

hope that help and have a nice day :slight_smile:

#3

Hello @justsomeone!

Thank you for the reply and for your effort to help me! When setting max-height and max-width the cover option does become ignored.

Answer_feedback3
Answer_feedback31600×1200 230 KB
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.

Kind regards,
Denis

#4

you very welcome @DenisM

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

https://cdn.pixabay.com/photo/2020/05/09/05/30/hirsch-5148320_1280.jpg

and you will see it start also from the top left corner but since it porterit the extra space will be on the right of the image

but in contain the browser center it as it can not know in advance if it will fill all the area pr part of it

so you can say object-fit will respect the img property about it’s width and height

check this for extra object-fit details

and thanks for this question which make me dive into new knowledge

and have a nice day :slight_smile:

1 Like
#5

Hello @justsomeone,
and thank you for providing me with such a deep knowledge in this topic.

Thank you for your time,
and also wish you to have a nice day

1 Like
#6

you very welcome and glad to help :slight_smile: