Responsive images

Last updated: August 16, 2024
UX goal: draft

A reader can:

  • understand the topic well enough to use it
  • see who wrote it and when it was last updated
  • mark it read and leave feedback, when signed in

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…

  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/
  • …