Bootstrap Carousel在加载时将图像切成两半

Question

使用自举转盘，在加载每张图像时，图像垂直切成两半，只有在满载时才会变好。

我使用的代码来自Boostrap网站。

我缺少什么？

<div class="container">
<div id="largoheady">


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="<?php bloginfo('template_directory');?>/images/heady.jpg" title="something " alt="something" > 
    </div>

    <div class="item">
      <img src="<?php bloginfo('template_directory');?>/images/heady.jpg" title="something " alt="something" > 
    </div>

    <div class="item">
      <img src="<?php bloginfo('template_directory');?>/images/heady.jpg" title="something " alt="something" border="0" class="img-responsive"> 
    </div>

    <div class="item">
      <img src="<?php bloginfo('template_directory');?>/images/heady.jpg" title="something " alt="something" border="0" class="img-responsive"> 
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


</div>
</div>

编辑添加2张图片。第一个显示图像加载时发生的情况。第二张图显示完整滑块。

Answer 1

你可以尝试这个CSS：

.carousel-inner > .item img{
   width:100%;
}

Answer 2

搞定了 - 我的自定义CSS文件出错了。

一旦我摆脱它，引导旋转木马就能正常工作。

我有一个来自＆＃34;响应式容器＆＃34;的旧代码，而那条css正在弄乱旋转木马的输出。

错误代码＆gt;旋转木马工作得很好！

谢谢！希望有同样问题的其他人也可以解决它们。