ImagesLesson 84Free preview

Responsive Images

This lesson is part of How To · All levels

Summary

Responsive image adjustment to the width of the container so that it does not overlap on a small screen. The basic max-width rule: 100% and height: auto already makes the image proportional. For performance, srcset and sizes allow the browser to select the most appropriate image file.

Key points

Max-width: 100% preventing images from exceeding the width of the container.
Height: auto maintains the original ratio of the image.
Srcset provides several image sizes for the browser to select.
Sizes give a broad indication of the image's display at various viewport conditions.
Picture elements are useful for art direction or alternative image formats.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.