Demos Variable width

A very exciting yacht race. — This uses a mobile first approach with 5 breakpoint. It only loads images as each breakpoint matches.

HTML


<img src=""
srcset="
img/ 320w,
img/ 480w,
img/ 768w,
img/ 1024w,
img/ 1280w"
sizes="
(max-width: 20em) 30vw,
(max-width: 30em) 60vw,
(max-width: 40em) 90vw"
alt="A very exciting yacht race.">

Credits

Author: Yoav Weiss /

Hosting and bandwidth for these demos is provided by