title: Bootstrap carousel images not same height in mobile view
body: <p>i have an bootstrap carousel on my page. The images I use have all different heights. I want that all images have the same height. For that I used </p>
  
  <pre><code>.carousel{ max-height: 1000px; overflow: hidden; }
  </code></pre>
  
  <p>I know it's not perfect but it works on desktop view. But in mobile view it didn't work and the pictures have not the same height. 
  So how can I make it that the images have all the same height in mobile view?
  I hope someone can help me :)
  Thanks.</p>
  
  <p>That's my carousel-code:</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
  &lt;!-- Indicators --&gt;
  &lt;ol class="carousel-indicators"&gt;
    &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
    &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
    &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  
  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner"&gt;
    &lt;div class="item active"&gt;
      &lt;img src="./img/index/seo.png" alt="Los Angeles" style="width:100%;"&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;img src="./img/index/security.jpg" alt="Chicago" style="width:100%;"&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;img src="./img/index/sport.jpg" alt="New york" style="width:100%;"&gt;
    &lt;/div&gt;
  
    &lt;div class="item"&gt;
      &lt;img src="./img/index/service.png" alt="New york" style="width:100%;"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Left and right controls --&gt;
  &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
    &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
    &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
   &lt;/div&gt;
  </code></pre>