title: Bootstrap carousel responsive img
body: <p>I want to have the img in the carousel responsive. The height should be 100vh but the width needs to be as wide as it goes, depending on how big the img is. The overflowing part should be hidden. Now, when the screen gets smaller, the img is resized not to scale. Here's some screen shots</p>
  
  <p>This is fine at full width, desktop version
  <a href="https://i.stack.imgur.com/aHTfq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aHTfq.png" alt="This is fine at full width, desktop version"></a></p>
  
  <p>This is about the witdh of tablets, but there are white space at the bottom which i dont want.
  <a href="https://i.stack.imgur.com/XO6tS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XO6tS.png" alt="enter image description here"></a></p>
  
  <p>This is the phone version, resized but not to scale. It should also takes up the whole window, but the overflowing width can be hidden.
  <a href="https://i.stack.imgur.com/tGUwN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tGUwN.png" alt="enter image description here"></a></p>
  
  <p>This is what I have for css: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel,
  .carousel-inner {
       height: 100vh;
  }
  
  .carousel img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100vw;
    height: 100vh;
    max-width: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="carousel-inner" role="listbox"&gt;
                          &lt;div class="item active"&gt;
                              &lt;img class="img-responsive" src="photos/JO2_2978.JPG" alt="xmas_orchestra"&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
                              &lt;img src="photos/JO2_2875.JPG" alt="..."&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
                              &lt;img src="photos/IMG_1824.JPG" alt="..."&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
                              &lt;img src="photos/JO2_2955.JPG" alt="..."&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
                              &lt;img src="photos/IMG_3913.JPG" alt="..."&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
                              &lt;img src="photos/JO2_2957.JPG" alt="..."&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt; &lt;!-- CAROUSEL-INNER --&gt;</code></pre>
  </div>
  </div>
  </p>