Flexible Images
By default, images display at their intrinsic size and can overflow their container. Setting max-width: 100% makes them shrink to fit.
Add height: auto to preserve the aspect ratio as the image scales down.
HTML
Beginner
4 min read
Responsive Images with CSS
Example
/* The responsive image rule */
img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}
/* In HTML */
<img src="hero.jpg" alt="Hero image" width="1200" height="600"> Pro Tip
Always include width and height attributes on img tags — it prevents layout shift as images load.