title: How to fit whole image inside Bootstrap Carousel?
body: <p>The bottom part of the images are always cut out. Does anyone know how I can fix this? Thanks for your help! </p>
  
  <p>Here is the code I have for the bootstrap carosuel:</p>
  
  <pre><code>&lt;div id="carousel_world"&gt;
      &lt;div id="carouselExampleIndicatorss" class="carousel slide" data-ride="carousel"&gt;
          &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#carouselExampleIndicatorss" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#carouselExampleIndicatorss" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#carouselExampleIndicatorss" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;li data-target="#carouselExampleIndicatorss" data-slide-to="3"&gt;&lt;/li&gt;
              &lt;li data-target="#carouselExampleIndicatorss" data-slide-to="4"&gt;&lt;/li&gt;
              &lt;li data-target="#carouselExampleIndicatorss" data-slide-to="5"&gt;&lt;/li&gt;
              &lt;li data-target="#carouselExampleIndicatorss" data-slide-to="6"&gt;&lt;/li&gt;
              &lt;li data-target="#carouselExampleIndicatorss" data-slide-to="7"&gt;&lt;/li&gt;
          &lt;/ol&gt;
          &lt;div id="inner_world" class="carousel-inner"&gt;
              &lt;div class="carousel-item active"&gt;
                  &lt;img class="d-block w-100" src="../Pictures/world_photos/img1.jpg" alt="First slide"&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item"&gt;
                  &lt;img class="d-block w-100" src="../Pictures/world_photos/img2.jpg" alt="Second slide"&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item"&gt;
                  &lt;img class="d-block w-100" src="../Pictures/world_photos/img3.jpg" alt="Third slide"&gt;
              &lt;/div&gt;
  
              &lt;div class="carousel-item"&gt;
                  &lt;img class="d-block w-100" class="d-block w-100 h-auto" src="../Pictures/world_photos/img4.jpg" alt="Third slide"&gt;
              &lt;/div&gt;
  
              &lt;div class="carousel-item"&gt;
                  &lt;img class="d-block w-100 h-auto" src="../Pictures/world_photos/img5.jpg" alt="Third slide"&gt;
              &lt;/div&gt;
  
              &lt;div class="carousel-item"&gt;
                  &lt;img class="d-block w-100 h-auto" src="../Pictures/world_photos/img6.jpg" alt="Third slide"&gt;
              &lt;/div&gt;
  
              &lt;div class="carousel-item"&gt;
                  &lt;img class="d-block w-100 h-auto" src="../Pictures/world_photos/img7.jpg" alt="Third slide"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;a id="prev_caro_world" style="margin-left:-5%" class="carousel-control-prev" href="#carouselExampleIndicatorss" role="button" data-slide="prev"&gt;
              &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a id="nxt_caro_world" style="margin-right:-5%" class="carousel-control-next" href="#carouselExampleIndicatorss" role="button" data-slide="next"&gt;
              &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated. Any help would be greatly appreciated. </p>