Question about CSS ”Lab - Build a Tribute Page”

Curriculum Help
1

Hello!

How do I know that these instructions:

  1. Your #image should use max-widthand height properties to resize responsively, relative to the width of its parent element, without exceeding its original size.
  2. Your img element should be centered within its parent element.

are meant to create these specific rules:

  • 16. Your img element should have a display of block.
  • 17. Your #image should have a max-width of 100%.
  • 18. Your #image should have a height of auto.

Why specifically ”block”?

Why max-width: 100% ; and not ”width: 100%; max-width:[actual image width]”

Why ”height: auto;” instead of, for instance, ”height: 100%;” or a set ratio?

2

All these are meant too keep things to frame, to prevent the elemnets from overflowing, you do not want to have horizontal scrolling, these prevent that. The block value makes the image behave like a div, images are inline and to make them behave like block level we use the block value. Max-width ensures that the elements do not go past the screen size. Auto height ensures that the image aspect ratio stays the same as it adjusts to different screen sizes, preventing it from looking stretched or squished.

4

Yes, but wouldn’t something like ”display: flex;” do a similar thing? And same with width: 100%; and an actual pixel max-width value? I can see setting height to auto being the most efficient way to do it, but wouldn’t something like aspect-ratio work as well? That’s been used in previous lessons.

I’m just trying to understand best practices.

5

While display: flex absolutely works for centering, it must be applied to the parent container, whereas display: blockallows the image to independently manage its own centering in a much simpler way.Secondly, using a hardcoded pixel value for max-width or a specific aspect-ratio restrains your CSS to one specific image size, which breaks if you swap in a different image. On the other hand, combining max-width: 100% and height: auto acts as a universal, content-agnostic safety net, it tells the browser to respect the natural proportions of any image you drop into the HTML, preventing distortion without ever needing manual updates.

Hope this helps.

6

Okay, thanks, that makes a lot of sense!

I think pushing this someplace earlier in the course could maybe be helpful? Most of the labs make you use pixel max-width values and flexbox for centrering and scaling. The one example i can come to think of were we are asked to maintain an aspect ratio of an image is in one of the flexbox labs. Does ”max-width: 100%; height: auto;” also work for flex items? Maybe that had to do with using images of varying aspects ratios and cropping the overflow….?