title: Best way to display a full screen img that is smaller than bigger size resolution screens such as an 27 inch iMac Retina resolution 5120 x 2880
body: <p>I have a stock image of 1772 px. This image is the largest available. The raw file is gone so I can't create an image of 5120 px wide. How would the markup and CSS look for that image if I want to be able to stretch it nicely across the entire width of the iMac?</p>
  
  <p>Minimum requirements:</p>
  
  <ul>
  <li>I'm using Bootstrap so it has to work with that. And preferably with the <code>img-responsive</code> built-in class. Do I need to have the <code>img</code>-tag in a <code>container-fluid</code> div?</li>
  <li><code>&lt;picture&gt;</code>-element needs to be used since art directing is involved. When the viewport hits 767px and lower I'm displaying the image in portrait mode.</li>
  </ul>
  
  <p>Here's the code I'm experimenting with:</p>
  
  <pre><code>&lt;picture&gt;
      &lt;source media="(min-width: 768px)"
              srcset="/img/landscape/large.jpg 1772w,
                  /img/landscape/medium.jpg 886w,
                  /img/landscape/small.jpg 443w"
              sizes="100w" /&gt;
  
      &lt;source srcset="/img/portrait/large.jpg 955w,
                  /img/portrait/medium.jpg 640w,
                  /img/portrait/small.jpg 320w"
              sizes="100vw" /&gt;
  
      &lt;img src="/img/landscape/medium.jpg" alt="" /&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p>Currently firefox and Chrome managemes to strech out the image nicely but IE10 stops at 1772px and leaves white-space on the right of the image.</p>
  
  <p>If I set the <code>img</code> to <code>width:100%</code> the image will stretch but I'm confused of wheather this is the right approach since in Bootstrap they use <code>max-width</code>.</p>