<h1>Responzivní obrázky: srcset &amp; sizes</h1>

<pre><code>&lt;img srcset=&quot;small_600.png 600w, medium_1024.png 1024w, large_1600.png 1600w&quot;
  <b>sizes=&quot;(min-width: 800px) calc((100vw - 2*8px) * 0.49), calc(100vw - 2*8px)&quot;</b>    
  alt=&quot;Obr&aacute;zek&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;</code></pre>

<p>
  <a href="http://www.vzhurudolu.cz/prirucka/srcset-sizes">Článek</a>. 
</p>

<div class="images">

  <p class="image">
    <img      
    srcset="https://via.placeholder.com/600 600w, 
    https://via.placeholder.com/1024 1024w,
    https://via.placeholder.com/1600 1600w"
    sizes="(min-width: 800px) calc((100vw - 2*8px) * 0.49), calc(100vw - 2*8px)"    
    alt="Obrázek" width="200" height="200">
  </p>

  <p class="image">
    <img      
    srcset="https://via.placeholder.com/600 600w, 
    https://via.placeholder.com/1024 1024w,
    https://via.placeholder.com/1600 1600w"
    sizes="(min-width: 800px) calc((100vw - 2*8px) * 0.49), calc(100vw - 2*8px)"    
    alt="Obrázek" width="200" height="200">
  </p>
  
</div>
/* Layout */

@media only screen and (min-width: 800px) {  
  .image {
    float: left;
    width: 49%;
  }  
  
  .image:first-child {
    margin-right: 2%;
  }
}

/* Base */

img {
  width: 100%;
  height: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.