<script src="https://cdn.jsdelivr.net/npm/imgix.js@3.4.2/dist/imgix.min.js"></script>

<img ix-src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop&q=85&auto=format&sharp=10&txtalign=middle,center&txtclr=fff&txtfont=helvetica,bold&txtsize=100&txtfit=max&txt=original" sizes="(min-width: 36em) 33.3vw, 100vw" class="responsive-img" alt="Bridge">

<img ix-src="https://assets.imgix.net/examples/bluehat.jpg?w=640&h=640&fit=crop&q=85&auto=format&sharp=10&txtalign=middle,center&txtclr=fff&txtfont=helvetica,bold&txtsize=100&txtfit=max&txt=original" sizes="(min-width: 36em) 33.3vw, 100vw" class="responsive-img"
alt="Woman With Hat">

<img ix-src="https://assets.imgix.net/unsplash/mountains.jpg?w=640&h=640&fit=crop&q=85&auto=format&sharp=10&txtalign=middle,center&txtclr=fff&txtfont=helvetica,bold&txtsize=100&txtfit=max&txt=original" sizes="(min-width: 36em) 33.3vw, 100vw" class="responsive-img"
alt="Mountains">

<section class="content">
  <article>
    <h1>Srcset &amp; sizes with imgix</h1>

    <p>Using the imgix <code>w</code>, <code>h</code>, and <code>dpr</code> URL parameters, we can simplify the amount of effort it takes to generate the srcset attributes on our images. The numbers on the images are generated using imgix to give visual
      feedback on which image the browser has chosen to display based on the query. Additionally, we're using <a href="https://github.com/imgix/imgix.js" target="_blank">imgix.js</a> to generate the srcset using minimal lines of code.</p>
    <div class="button-group">
      <a href="https://blog.imgix.com/2015/08/18/responsive-images-with-srcset-imgix.html" class="button" target="_blank">Srcset & imgix guide</a>
      <a href="https://imgix.com" target="_blank" class="button">Visit imgix.com</a>
    </div>
  </article>
</section>
<footer>
  <hr>
  <a href="https://imgix.com"><img src="https://assets.imgix.net/presskit/imgix-presskit.pdf?page=3&fm=png&w=320&dpr=2" width="160" height="60"></a>
</footer>

.responsive-img {
  max-width: 100%;
  display: block;
  float: left;
}


/*Safari & iOs fix*/

@media(min-width:36em) {
  .responsive-img {
    width: 33.333333333333vw;
  }
}