Responsive images

Examples

Later we’ll do a mini write-up on each…

1. Default image examples
2. Constraining them with a parent element
3. General background images
4. Using background images for consistent ratio (hack)
5. The new object-fit (and aspect-ratio)
6. Switching the src based on viewport size with the picture element
7. srset with img
8. Background image with CSS and media query
9. ?
10. Got any situations or ideas?
11. Some grid-cell examples would be good

Other resources to chat about later

• https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/
• …