max-width
Stops images from overflowing their container.
Platform under construction
Responsive Images
Responsive images keep media sharp, fast and correctly cropped across screen sizes and device densities.
.photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
Responsive mental model
Responsive images are about quality, speed and composition.
An image can break a layout by overflowing, loading too heavy or cropping the important subject badly.
Basic responsive image CSS starts with max-width: 100% and height: auto. More advanced work uses srcset, sizes and picture so the browser can choose the right file.
High-end design also considers art direction. Sometimes the mobile crop should be different because the subject needs a different frame.
aspect-ratio
Reserves predictable media space.
object-fit
Controls how an image fills a fixed frame.
srcset
Lets the browser choose an efficient image source.
Visual model
Turn the responsive idea into something you can see.
Aspect ratio
The layout reserves stable space.
Object fit
The image fills the crop without distortion.
srcset
The browser can pick the right file.
Art direction
Important subjects stay visible.
Good CSS versus fragile CSS
Image that respects its frame
.photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 1rem;
}Distorted fixed media
.photo {
width: 900px;
height: 220px;
object-fit: fill;
}Rules of thumb
Responsive CSS should reduce stress, not create more of it.
Prevent overflow
Images should not be wider than their container.
Avoid distortion
Do not force width and height without object-fit or natural ratio care.
Reserve space
aspect-ratio prevents layout jumps before images load.
Use efficient sources
Large desktop images should not be the only option for mobile.
Crop deliberately
object-position can keep the subject in view.
Write useful alt text
Responsive media still needs semantic accessibility.
Production thinking
Responsive quality is proven at awkward widths.
Why does this matter?
Images often create the first premium feeling of a page, but they also create many performance and layout problems when handled casually.
Accessibility
Alt text belongs to the HTML image, not CSS. Cropping should not remove critical visual information.
Production note
Combine CSS framing with real generated image sizes. A beautiful crop still needs optimized files.
SEO note
Proper image markup, dimensions and descriptive alt text help image understanding and page quality.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change the mobile aspect ratio to 1 / 1 and judge the composition.
- Add object-position: center top to imagine a subject near the top.
- Explain why a real img element also needs alt text.
Practice assignment
Do this before moving to the next lesson.
- Create a responsive media card.
- Use aspect-ratio and width limits.
- Explain when you would use picture or srcset in HTML.
Try it yourself
Frame a responsive image placeholder
Self-check
Before you continue, prove that you understand Responsive Images.
Answer these questions before moving on. If the answer is vague, resize the lab idea mentally and explain what should change.
- Can you stop an image from overflowing?
- Can you explain object-fit without saying stretch?
- Can you use aspect-ratio to prevent layout jumps?
- Can you choose when a mobile crop should differ?
- Can you connect responsive images to performance?
Senior audit upgrade
HTML chooses image resources; CSS controls presentation.
CSS can make images fluid and cropped. HTML handles srcset, sizes and picture so the browser can download the right resource.
HTML job
Use srcset, sizes and picture for responsive file selection and art direction.
CSS job
Use max-width, aspect-ratio, object-fit and layout sizing for display behavior.
Alt text
Alt text belongs in HTML and must not be treated as a CSS concern.