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

I have a bootstrap carousel that fills the entire browser window, and I want to have images fit the entire carousel. I got the filling up and maintaining the correct aspect-ratio part done.

我有一个填充整个浏览器窗口的bootstrap轮播,我希望图像适合整个轮播。我完成了填充并保持正确的宽高比部分。

Code:

<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;
}

However, the problem is the image doesn't center and that looks kind of strange on smaller screens because all you're seeing is a part of the background and not the main graphic.

然而,问题是图像不居中,在较小的屏幕上看起来有点奇怪,因为你所看到的只是背景的一部分,而不是主图形。

Any ideas?

EDIT:

Heres a JSFiddle: http://jsfiddle.net/461q48by/ As you can see the image fits and the aspect ratio is maintained but the image is off center and all you can see are the frog's feet.

下面是一个JSFiddle:http://jsfiddle.net/461q48by/正如你所看到的那样,图像适合并保持纵横比但是图像偏离中心,所有你能看到的都是青蛙的脚。

1 个解决方案

#1

Fix your syntax errors.

修复语法错误。

Take out your extra </div>'s

拿出额外的

Move the closing </div> for the myCarousel div to the end of the carousel. The carousel includes the carousel nav area.

将myCarousel div的结束移动到轮播的末尾。旋转木马包括旋转木马导航区域。

Then mess with your CSS but this should take care of it.

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

#1

Fix your syntax errors.