FAQ: Sizing Elements - Scaling Images and Videos

This community-built FAQ covers the “Scaling Images and Videos” exercise from the lesson “Sizing Elements”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn Responsive Design

FAQs on the exercise Scaling Images and Videos

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Could you explain, how the following code works? Am I right that the first property is more specific than the second one?
If so, why do we encode the second “display” rule, especially since it seems to conflict with the first?

.images .image-container {
display: inline-block;
width: 50%;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
}

You are right in saying that .images .image-container has a higher specificity than .image-container img

There is no conflict as the first rule (.images .image-container) controls the 2 images at the bottom of the page, the one with the camel and the map. By setting them to display: inline-block we are allowing the 2 images to sit next to each other as opposed to on top of each other. Now remember that we are targeting the <div> with class="image-container" within another <div> with class="images", this means that the first picture, the one with the market, will not be affected as that picture does not fall within the <div class="images">.

Here is the HTML:

<div class="image-container">
        <img src="market.jpg" />
</div>

<div class="images">
      <div class="image-container">
        <img src="camel.jpg" />
      </div><!--
      Adding comment to ensure no whitespace between inline-block div elements from HTML file.
      --><div class="image-container">
        <img src="map.png" />
      </div>
    </div>
</div>

Notice how the market picture does not fall into .images .image-container, and so there is no conflict.

1 Like

Why didn’t we use width instead of max-width. Since overflow is set to hidden then the content overflowed will be hidden from view anyways.

Hi

In this lesson it ask us to:

set the display to block . This will instruct the images to behave as block-level elements and facilitate scaling (as opposed to their default inline behavior).

it states that changing the images default display to block-level will

facilitate scaling

Could you please explain how block-level img are able to scale and inline and inline-block aren’t?

Thank you.

3 Likes

If you set the width of the <img> element to 100%, it would take up the full width of its parent container at all times.

However, when setting its max-width property to 100%, it will only take up the whole width of its parent container up to its maximum width. This means that if the image was 400 x 200px, it would only take up the whole width of its parent container up to 400px. So if its parent container was 300px wide, the <img> would scale down, but if it was 500px wide, the <img> wouldn’t take up the whole width of its parent container - it would only take up 400px of its parent container’s width

Finally, if you set the <img> element’s min-width property to 100%, it would take up the whole width of its parent container only if it has a width that is at least the width of the image. So, again, if the image was 400 x 200px, it would only take up the whole width of its parent container if the parent container was at least 400px wide

Here’s where I read this:

1 Like

In this lesson, Codecademy used a <div> as the <img> container. However, there is a semantic element that you should use as an <img> container. This is the <figure> element

Hi, I’m having a hard time understanding this statement:

" The example above scales the width of an image (or video) to the width of a container. If the image is larger than the container, the vertical portion of the image will overflow and will not display. To swap this behavior, you can set max-height to 100% and width to auto (essentially swapping the values). This will scale the height of the image with the height of the container instead. If the image is larger than the container, the horizontal portion of the image will overflow and not display."

Can you please elaborate this one using another example?

image

  1. Why do I need the overflow: hidden; when max-width: 100; prevents overflow from happening?

  2. Why do I need height: auto; since this should be the default value?

Thanks,
Paul

1 Like

I’d like an explanation for this as well.

1 Like

in 8/19 #4 we get this
" Finally, within the same CSS rule, set the display to block . This will instruct the images to behave as block-level elements and facilitate scaling (as opposed to their default inline behavior)".
How are the images still inline even though we’ve changed it to block? Shouldn’t they be on different lines?

  1. The container may have other children that cause overflow, or the image’s height may overflow.
  2. I read from stack overflow and understand that the default value is the image’s intrinsic height.

I was confused about what they meant by “facilitate scaling” too. However, earlier they mention “the last line will display images as block-level elements (rather than inline-block, their default state). This will prevent images from attempting to align with other content on the page (like text), which can add unintended margins to the images.”. I understand that we don’t want the image to be on the same line with other content, but I don’t have a clear answer to your question.

I saw no difference when I just used max-width, and when I added the other properties - height: auto &display: block. So what was the point of them?

1 Like

I was about to post exactly the same comment! I think a lot of this css stuff only makes sense when you are building your own pages and have to start tweaking things to get it to look the way you want.

2 Likes

Yeah you’re probably right. I just chalked it up to the fact that there are probably some CSS properties interfering with the max-width that we haven’t been introduced to yet

1 Like

I’ve got years of experience with CSS and I’m still torn between calling this particular lesson useless/more harm than good, and calling it a valuable intro to the endless issue of CSS properties either not having any prescribed effect on an element, or being redundant to existing effects in the first place.

Either way, it’s probably overdue for a rewrite.