Responsive Image with srcset

index.html

  <h1>Responsive Images with srcset</h1>
<div class="wrapper">
  <img class="flexible"
       srcset="https://via.placeholder.com/320x160/ddd 320w, 
               https://via.placeholder.com/480x240/ccc 480w, 
               https://via.placeholder.com/768x384/444/fff 768w, 
               https://via.placeholder.com/1024x512/a20000/fff 1024w, 
               https://via.placeholder.com/1280x640/fd8700/000 1280w"
       
       sizes="(max-width: 20em) 100vw, 
              (max-width: 30em) 60vw, 
              (max-width: 40em) 50vw" 
       src="https://via.placeholder.com/400x200&text=Fallback"        
       alt="" />
</div>

responsive-image-with-srcset.markdown

Responsive Image with srcset

A Pen by Jens Grochtdreis on CodePen.

License.

style.css

.wrapper {
  width: 94%;
  margin: 20px auto;
  padding: 10px;
  background-color: #fff;
}
body {
  background-color: #ccc;
}
.flexible {
  width: auto;
  height: auto;
  max-width: 100%;
}
h1 {text-align: center;}