max-width: 100% and height: auto
The image file is 600 × 400, but its column is 240px. max-width: 100% shrinks it to 240px and height: auto keeps the 3:2 shape, so it's 160px tall. The aspect-ratio comes from the width and height attributes.
Images and video are fixed-size by nature, so responsive pages tame them with CSS: max-width: 100%; height: auto stops overflow while keeping the shape, aspect-ratio reserves the right space, and object-fit/object-position decide how a picture fills a box of a different shape.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write CSS so every image and video on a page is fluid, keeps its shape and has no gap underneath.
Make a gallery of square thumbnails from photos of any shape, keeping the top of each photo (people's heads) in view.
Make a map <iframe> that is full width and always 4:3.
Explain it without notes
Why do max-width: 100% and height: auto make images responsive?
How do the HTML width and height attributes help with layout shift, even for fluid images?
Compare object-fit: contain, cover and fill.
How would you make a YouTube <iframe> embed responsive?
Preview
Console
Nothing logged yet.Expected console output
width attribute: 600
drawn size: 240 x 160
aspect-ratio: auto 600 / 400