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/ 正如您所看到的那样，图像适合并保持纵横比，但图像偏离中心，您只能看到青蛙的脚。

Answer 1

修复语法错误。
取出额外的</div>
将myCarousel div的结束</div>移动到轮播的末尾。旋转木马包括旋转木马导航区域。

然后搞乱你的CSS，但这应该照顾它。

将图像置于引导旋转木马中，同时保持纵横比，并填充整个旋转木马？

1 个答案: