Responsive Fluid Images
What is a Responsive Image?
Imagine trying to hang a giant movie poster inside a tiny locker. If you don't trim the poster or scale it down, the poster will spill out of the locker door, tearing or blocking the hallway.In CSS, by default, images load at their absolute native pixel dimensions. If a photo is 1200px wide and is loaded inside a mobile viewport that is only 400px wide, the photo will bleed off the screen, causing ugly horizontal scrolling. To make an image fluid and responsive, we write:
img {
max-width: 100%;
height: auto;
}
Why does it matter?
Setting fluid boundaries ensures that images scale down smoothly on small screens, fitting inside their parent columns without breaking your layout, while retaining their original proportions (preventing them from looking stretched or squished).Syntax Breakdown
max-width: 100%; — Prevents the image from ever growing wider than its parent container, but allows it to scale down if the container shrinks.height: auto; — Tells the browser to automatically recalculate the height proportionally to the width, preventing visual distortion.Common Mistakes
width: 100%; forces small icons to stretch up to fill the entire container, making them look blurry and pixelated. Setting max-width: 100%; allows images to scale down, but prevents them from scaling up past their native size!Quick Reference
max-width: 100% — Constrains image to parent width limits.height: auto — Maintains correct aspect ratio during scaling.Your Task
Ensure the image selector scales down fluidly by setting its `max-width` to `100%` and `height` to `auto`.
index.html
Type code above to start the lesson.
Live Preview