title: Image cover inside slider
body: <p>I have the following bootstrap slider</p>
  
  <pre><code>&lt;div id="demo" class="carousel slide" data-ride="carousel"&gt;
  
    &lt;!-- Indicators --&gt;
    &lt;ul class="carousel-indicators"&gt;
      &lt;li data-target="#demo" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#demo" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#demo" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;!-- The slideshow --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="carousel-item active"&gt;
        &lt;img src="la.jpg" alt="Los Angeles" width="100%" height="100%"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img src="chicago.jpg" alt="Chicago" width="100%" height="100%"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img src="ny.jpg" alt="New York" width="100%" height="100%"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Left and right controls --&gt;
    &lt;a class="carousel-control-prev" href="#demo" data-slide="prev"&gt;
      &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="carousel-control-next" href="#demo" data-slide="next"&gt;
      &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have images with different height, how can I use the cover function to get all images same height and width fit to border and with a cover center effect ?</p>
  
  <p><a href="https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&amp;preval=cover" rel="nofollow noreferrer">https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&amp;preval=cover</a></p>