title: Bootstrap carousel setting auto height
body: <p>Is there a way to not set a height for the bootstrap carousel and let it work out the height automatically based on the image width being set at 100%? I understand it will bounce up and down in between slides which is fine. Currently for the bootstrap html I have:</p>
  
  <pre><code>&lt;div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
              &lt;div class="slider-image img-responsive " style="background-image: url(/folder/image.png); background-position: 50% 50%; background-size: cover;"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With CSS:</p>
  
  <pre><code>#carousel, .item, .slider-image {
    height: auto;
    width: 100%;
  }
  </code></pre>
  
  <p>With this I can't see image at all - it just sets the height to 0. Any ideas?</p>