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:
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:
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:
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:
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.
