Adaptive Images

Markup

<ul class="clearfix gallery">
    <li style="width:50%">
        <img sizes="50vw" alt="..."
            srcset="480/sample1.jpg 480w, 960/sample1.jpg 960w">
    </li>
    <li style="width:50%">
        <img sizes="50vw" alt="..."
            srcset="480/sample2.jpg 480w, 960/sample2.jpg 960w">
    </li>
    <li style="width:100%">
        <img sizes="(max-width: 40em) 50vw, 100vw" alt="..."
            srcset="480/sample3.jpg 480w, 960/sample3.jpg 960w, 1920/sample3.jpg 1920w">
    </li>
</ul>

Photos by Ben (CC BY-SA 2.0)

Feature