Why do we use maximum width 100% to see a full image and not minimum width?

Some time back in the day there was a gray rule that said we should not leave inline elements exposed in the BODY. To satisfy this we gave them a parent container, usually a DIV or a P. That was before CSS 1 which made it possible to declare inline elements as block level elements.

A lot has changed in twenty some years, especially with HTML5 which gave us the FIGURE as an image container, and it has its own FIGCAPTION for more effective SEO parsing as well as improved accessibility and a lesser reliance on alternate text


Oh ok, thank you. So basically, now, image containers aren’t actually required? And we should only use the <figure> element when we add self-contained media such as: illustrations, diagrams, code snippets, and images? When exactly do we use the <figure> and when do we not?

1 Like

One would think we would use FIGURE whenever we wish to provide a scoped caption with the image or illustration. Captions can be any length, unlike alternate text which is intentionally brief.

Not as such, no, but I still recommend not having then directly in the BODY. It follows that the page will have structure, and images will be contained in that structure, and not be part of the structure. The content and its connection to the image(s) is defined by their containing structure, be it a section, article, div, &c.

If a picture is only eye candy and has no relation to the topic then is can be relegated to the style sheet as a background image or skin graphics. This way it doesn’t skew the way the SE’s interpret the page or topic.


Since Codecademy is still directing new learners to this question, and I feel that the responses given to us were either not detailed enough or incorrect, here is my explanation to answer this question to help others understand.

To fully answer this question, we will have to revisit the material presented in Exercise 4 of this lesson regarding using percentages to size elements. It is stated: “When percentages are used, elements are sized relative to the dimensions of their parent element (also known as a container).”

So, in this exercise, to size the image through responsive design we used this rule set on the image:

Image 1

The max-width: 100% code will resize the image’s width to equal 100% of its parent container. Well what is the width of its parent? The width of its parent was actually not set in the code as seen in the image below:

Image 2

Therefore, this means that the image’s width will default to the width of its parent’s parent container which was set to the following:

Image 3

So, the image’s width is 100% of the 52% of the page width that the blog post container is allocated. Therefore, the image will always align with the width of the paragraph that it is contained in. The reason why the image does not distort as it’s width is changed to fit into the blog post container is because it’s height is set to automatically change when it’s width changes, so that is why the entire image is always displayed in the post proportionately.

I can see why some people are getting confused thinking that the max-width: 100% rule is referring to 100% size of the image. Someone said that the max-width: 100% rule means that if the container gets bigger than 100% of the image size that the image will not stretch beyond 100% of its own size. However, I believe that is incorrect. When we are not using percentages, a size rule given to the child selector will override the rule of the parent container, and the child will display its own separate size in pixels. But in this case, when we use percentages, we are telling the child to reference the parent’s property and not deviate. This is why max-width: 100% is NOT telling the image to display a maximum of 100% of its own width. That is not the right way to read the code as I have read in previous responses. If you think about it, by default the browser already renders the image with 100% of its own width. This is the reason why it overflows the container in the first place.

The CSS code utilizes the width: 52% rule on the blog post container that is parent to the image container that is the parent of the image to set the width of the post to responsively change its width depending on the width of the browser page. So, the width of the blog post is dynamically set to 52% of the available page width and the image (grandchild) has been set to have the same (100%) of that width as well.

Now that we have established that, the answer to the second portion of the question may be slightly more complicated:

Remember the browser displays 100% of the image’s own width by default, so setting min-width: 100% would allow the image’s width to start at the matching width of its parent container and then also exceed its parent container’s width, so would not solve the image overflow problem. The only reason why we can’t see 100% of the image’s width is because its parent container has the overflow: hidden rule.

Recall that I said before that the width of the image’s direct parent (.image-container) was actually not set in the code. When neither the height nor width of a container are set, it’s height and width expand to match the size of its contents. So in this case, before any sizing rule is applied to the image container the height of .image-container is the same as the height of the image. The width of the image container would be equal to the width of the image as well, except that its width has already been constrained by its parent container to expand no larger than the 52% width that the #blog .post parent container applies to it. So, even though the image (by default) is at 100% width, we will not be able to see anything outside of the set width of the post container, since the overflow is hidden by the image container. That is why we need to set the width of the image to dynamically match the width of the post, but not allow a larger width. This in effect shrinks the image’s width down from much less than its own default width to instead equal the width of the post. We want the image’s width to match (100%) to the width of its container so that we can see the entire image, even if it is much smaller in overall size.

Setting the image’s width by using either width: 100% or max-width: 100% should do the exact same thing in this case to match the parent container. If we had set the image to max-width: 50%, then it would be half of the width of the blog post container. Using max-width versus width does not change the overall width, except in cases where they are combined simultaneously on the same element, then max-width will override the width property, and min-width will override the max-width property. Like if the rule had been written as follows, then the width would be 100% of the width of the image container UNTIL it reached the max-width, then it would not resize above 50% of the parent container width:

Image 4

I tried to simplify things, so that is why I didn’t reference all of the different percentages being applied here. If you really wanted to get technical, then technically the image is down 3 levels in relative sizing. The first div/container that wraps them all is the blog div which was set to 86% of the available width of the page. Then the post div is set to 52% of the blog container width, and the image div is 100% of that width.

Hopefully, I helped someone to better understand this, as it has taken me a while to try to understand all of this as well.


omgsh, thank you! this is the exact answer I needed. I’m learning so I need things explained to me like I’m a new student…not someone who is advanced and well experienced…otherwise I probably wouldn’t be taking this course. lol

Thank you for the detailed explanation. max, min, and plain width are well understood now!!

It was helpful, thanks

Thank you so much for this detailed explanation! It definitely clarified the terms!

seriously, man, I have seen this in a lot of forums, this guy gives very long-winded complicated explanations which is very difficult for beginners to understand.

1 Like

Excellent explanation! Thank you!

I think another way of looking at it is the following example:

Assume the image-container is 400px wide and the image is 600px wide, that is why it looks like it is sticking out to the right (200px in this example) in the beginning of the exercise.

step 1:

This puts the layout back together → basically removes 200px from the right side of the image.

step 2:

This sets the width of the the image to a maximum of 100% of the parent container (image-container) which here is 400px.
image width 600 scaled to → new image width 400px max
Since the new image width is now 400 px it doesn’t overflow the the 400px container.

Maybe numbers will help to understand that topic. For the detailed explanation see @michaelagilbert31354 ´s reply.


This confused me initially as well. It seemed that min-width 100% should make the full image display if anything for some reason. Reading the first few responses confused me more but now that I realized my improper thinking they make a little more sense. Essentially-and I don’t know why I didn’t realize this initially lol.-if the image is overflowing its container than the size of that image is greater than 100% of its container. That was the distinction I wasn’t fully realizing initially for some reason. So than setting max-width to 100% prevents the image from exceeding the border of its container and overflowing. Setting min-width to 100% means that the image will always be at least the full size of its container. And so still has the possibility of being larger than 100%, like 150% or 200% of the container size. Which would cause it to overflow the container and become hidden. I honestly can’t even really think of why it seemed to be the opposite now lol. I had no real reason it just sort of seemed that way. At first at first I missed that we were applying this to .image-container img and thought we were just applying it to .image-container and I think that just got me all discombobulated from there. It’s late don’t judge me lol.


Perfect explanation!

In number 2, you said


but if the container width is larger then 640px, the picture will not stretch any further… it will go UP TO 100% of the image size… that means 640px:


So that means there will still be space in the container after the image go up to 100% (which is 640px)?

Excellent answers! Thanks kind sir!

Thanks for taking the time to answer this question, actually answered one of my question from an earlier exercise

The max-width property in CSS is used to set the maximum width of an element. When set to 100%, it means that an element can take up to but no more than 100% of the width of its parent container.

When you apply max-width: 100%; to an image, the image will never exceed the width of its parent container, ensuring that it scales down if it has to, but never scales up to be larger than its original size.

This is especially useful for responsive design. As the viewport size or the size of the parent container changes, the image will shrink if needed so that it doesn’t overflow the container. This ensures that the entire image is always seen, because it won’t be wider than its parent container.

In contrast, the min-width property would force an element to have at least a certain width. But in case of images, setting min-width: 100%; would make sure that the image covers at least 100% width of its parent. But if the image’s natural width is less than the parent’s width, the image will scale up and can become pixelated or distorted. Also, if the parent container becomes smaller than the natural width of the image, the image will not scale down and hence can overflow the container. That’s why max-width: 100%; is generally preferred for responsive images.

1 Like

Thank you very much, I have tested to verify and what you said is correct. :+1:

“Why do we use maximum width 100% to see a full image and not minimum width?”

  1. If we go with width: 100% the image will stretch, which means that with a bigger window, it will lose quality.

  2. While min-width: 100% intuitively means that the image will display it’s full width at a minimum, we must remember that the properly relates to its container. In that case, the image will at a minimum have the width of the container. With a small enough image, it might work to display it fully, but with an image larger than the container we will have the same situation where the image overflows.

  3. Max-width: 100% (which is what’s used in the exercise) makes the image fill the container up to the maximum size, as sired77 said. What does this mean in the context of the website?

But if we keep in mind that the image will cap at its resolution width, we can see that when we use a bigger window our layout becomes a bit undesirable:

So there will still be space in the container after the image reaches its max-width. Something to keep in mind while writing your CSS.

I hope this is a bit helpful :slight_smile:

thank you for your help.