Responsive design is not only about layouts, it is also about images and media.
Images that look good on desktop may break layouts on mobile if they are too large.
Responsive images automatically resize to fit different screen sizes without losing quality.
Using max-width 100 percent makes images shrink on small screens.
The height auto keeps the image ratio correct.
This method ensures images always fit inside their container.
It prevents overflow and keeps layouts clean on all devices.
This technique keeps videos responsive.
The video always stays in correct proportion on any screen size.
Best practices for responsive media
- Use max-width 100 percent for images
- Avoid fixed height on images
- Wrap videos to control size
- Test media on mobile devices
The picture element loads different images based on screen size.
This improves performance on mobile devices.
Practice task
Create a page and:
- Add an image with max-width 100 percent
- Add a responsive video
- Try using picture for different image sizes
- Test on mobile view
Next lesson
In the next page, you will learn about the mobile first design approach.