RWD Images — Code Challenge
Put let images fit the available space into practice. Rebuild the example from its HTML, then compare your result with the CSS solution. Change the content and the viewport before calling it finished.
How it works
- Responsive image styling prevents a large intrinsic image from stretching its container. HTML srcset and sizes can additionally help a browser choose an appropriate source file.
- Responsive design follows content constraints rather than a list of named devices. Resize continuously and check the first width at which the content needs a different arrangement.
- Keep a usable base layout before adding media queries. Verify text enlargement, keyboard focus, and a narrow viewport.
Your task
Use the HTML below to explore this rule: Responsive image styling prevents a large intrinsic image from stretching its container. HTML srcset and sizes can additionally help a browser choose an appropriate source file. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.
Review the CSS solution
img { display: block; max-width: 100%; height: auto; }
.layout { display: grid; gap: 16px; }
A solution to compare
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<figure class="card"><img class="photo" width="120" height="80" alt="Orange circle on a blue background above a green strip" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABQCAIAAABd+SbeAAABEklEQVR4nO3aSxHCQBRE0QhDABowgAD0sI4LLGEBC2R+mfScqrtP11lm3vZ8fzSg7fQFiwQadFagQWcFGnRWa0F/9/s/ge5O3I87H7qAuAd3MnQlcVvuWOiGyk2sM6GbK9dbB0J3Uq60ToPuqlxjHQU9QLnYGjToWZXLrEGDnli5wBo06LmVj1qDBg16tkCDBg0a9LyBBg0aNOh5Aw06C9rfO9Bx0F5YQMdBewUHHQftUinHunhVILRr0mtbV+6JhXbxfzHuVjPyoYu52w5YBfoQd49PrwV9YqBBZwUadFagR0HfXg8NCDTorECDzgo06KxAg84KNOisQIPOCjTorECDzgo06KxAg84KNOisQIPO6gd12QwrHUBvEQAAAABJRU5ErkJggg=="><figcaption>A small embedded image for experimenting with cropping and effects.</figcaption></figure>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
img { display: block; max-width: 100%; height: auto; }
.layout { display: grid; gap: 16px; }
Responsive image styling prevents a large intrinsic image from stretching its container. HTML srcset and sizes can additionally help a browser choose an appropriate source file.