title: Bootstrap Carousel cut image in half while loading
body: <p>Using the bootstrap carousel, and while each image is loading, the images are cut vertically in half, only become ok when fully loaded.</p>
  
  <p>The code i am using came from Boostrap website.</p>
  
  <p>What am i missing?</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div id="largoheady"&gt;
  
  
  &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" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="&lt;?php bloginfo('template_directory');?&gt;/images/heady.jpg" title="something " alt="something" &gt; 
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="&lt;?php bloginfo('template_directory');?&gt;/images/heady.jpg" title="something " alt="something" &gt; 
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="&lt;?php bloginfo('template_directory');?&gt;/images/heady.jpg" title="something " alt="something" border="0" class="img-responsive"&gt; 
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
        &lt;img src="&lt;?php bloginfo('template_directory');?&gt;/images/heady.jpg" title="something " alt="something" border="0" class="img-responsive"&gt; 
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Left and right controls --&gt;
    &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&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" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" 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;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edited to add 2 images. First one shows what happens while image loading. Second image shows full slider. </p>
  
  <p><a href="https://i.stack.imgur.com/mnzaN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mnzaN.jpg" alt="Bootstrap Carousel cut image in half while loading"></a></p>
  
  <p><a href="https://i.stack.imgur.com/6u2di.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6u2di.jpg" alt="Bootstrap Carousel"></a></p>