Bootstrap responsive Carousel, with custom height doesnt resize on Mobile, Tablets
<p>I have a responsive image slider which I currently have with a width which takes up the entire screen (100%), and a height of 600px due to the images being of various sizes.</p>

<p>When i resize my browser, and or navigate to the site in question on a mobile device, due to the custom 600px height size applied, the image does not correctly resize to fit the screen.</p>

<p>If I remove the height and or comment out the height within my css page, I no longer have the issue on mobile devices and the image resizes accordingly. However within a desktop browser I then face the issue wherein I have images with various height, and cannot overcome this with simply applying a class with css properties, and or a style element within my img tag as this does not work. Please see my example code below.</p>

<p>HTML:</p>

<pre><code>&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;/ol&gt;

&lt;!-- Wrapper for slides --&gt;
&lt;div class="carousel-inner"&gt;
    &lt;div class="item active"&gt;
            &lt;img class='img-responsive fill' src="img/example.jpg" &gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
            &lt;img class='img-responsive fill' src="img/example2.jpg"&gt;
    &lt;/div&gt;           
&lt;/div&gt;

&lt;!-- Controls --&gt;
&lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
    &lt;span class="icon-prev"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
    &lt;span class="icon-next"&gt;&lt;/span&gt;
&lt;/a&gt;
</code></pre>

<p>CSS:</p>

<pre><code>header.carousel .fill {
    width: 100%;
    height: 600px;
    background-position: center;
    background-size: cover;
}
</code></pre>