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.

1 Like

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.

6 Likes

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!!