Responsive images
Last updated: August 16, 2024
Introduction
We can make a place with all of the examples here…
Also what do we mean by “responsive?”
Examples
Later we’ll do a mini write-up on each…
- Default image examples
- Constraining them with a parent element
- General background images
- Using background images for consistent ratio (hack)
- The new
object-fit
(and aspect-ratio) - Switching the src based on viewport size with the
picture
element - srset with img
- Background image with CSS and media query
- ?
- Got any situations or ideas?
- 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/
- …