css - 在 Bootstrap 轮播中将图像居中，同时保持纵横比并填充整个轮播？

Question

我有一个填满整个浏览器窗口的 Bootstrap 轮播，我想让图像适合整个轮播。我完成了填充并保持正确的纵横比部分。

代码:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators" id = "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>
</ol>   
<!-- Carousel items -->
<div class="carousel-inner">
    <div class="item active">
        <div class = "im">
            <img src = "images/image.jpg">

        <div class="carousel-caption">
          <h3>First slide label</h3>
          <h6>Lorem ipsum dolor sit amet consectetur…</h6>
        </div></div>
    </div>
    <div class="item">
        <div class = "im">
            <img src = "images/image2.jpg">
        <div class="carousel-caption">
          <h3>Second slide label</h3>
          <h6>Aliquam sit amet gravida nibh, facilisis gravida…</p>
        </div></div>
    </div>
    <div class="item">
        <div class = "im">
            <img src = "images/image3.jpg">
        <div class="carousel-caption">
          <h3>Third slide label</h3>
          <h6>Praesent commodo cursus magna vel…</h6>
        </div></div>
    </div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

CSS:

.im { 
    height: 100%;
    width: 100%;
    background-color: red;
    float: left;
    overflow: hidden;

    position:relative;

 }
.im img {
    min-width: 100%;
    min-height: 100%;
}
#indicators {
 padding-bottom: 30px;
}

但是，问题是图像没有居中，在较小的屏幕上看起来有点奇怪，因为您看到的只是背景的一部分，而不是主要图形。

有什么想法吗？

编辑:

这是一个 JSFiddle:http://jsfiddle.net/461q48by/如您所见，图像适合并且纵横比保持不变，但图像偏离中心，您只能看到 Frog 的脚。

Answer 1

1. 修正语法错误。
2. 取出多余的</div>的
3. 动闭幕</div>对于 myCarousel div 到轮播的末尾。轮播包括轮播导航区域。

然后弄乱你的 CSS 但这应该会解决它。