Twitter Bootstrap:Carousel:在Definded height Viewport中垂直居中的图像

Question

我试图找到一种方法,在我的视口内为旋转木马垂直居中.目前图像工作正常,它将图像的大小调整为宽度上视口的大小.但我想使用图像的中心并裁剪照片的顶部和底部.

这是HTML:

<div class="carousel slide hero">
   <div class="carousel-inner">
       <div class="active item">
            <img src="img/hero/1.jpg" />
       </div>
       <div class="item">
           <img src="img/hero/2.jpg" />
       </div>
       <div class="item">
           <img src="img/hero/3.jpg" />
       </div>
    </div>
    <a class="carousel-control left" href=".hero" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href=".hero" data-slide="next">&rsaquo;</a>
</div><!-- hero -->

和一点点的CSS:

.carousel-inner {
    height: 320px;
    overflow: hidden;
}

任何帮助是极大的赞赏.我想要它,如果他们上传任何尺寸的照片,它可以被认为是可用的.

Answer 1

我通过指定.item高度并使其中的图像绝对定位来解决此问题:

.item {
height: 300px;
}

.item img {
max-height: 100%;  
max-width: 100%; 
position: absolute;  
top: 0;  
bottom: 0;  
left: 0;  
right: 0;  
margin: auto;
}

这将使旋转木马高度为300px,图像垂直和水平居中.

Answer 2

如果您不知道图像的高度,可以使用下一个样式

#product-detail .carousel-inner{
    height: 500px;
}

#product-detail .carousel-inner>.active{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#product-detail .carousel-inner>.next,
#product-detail .carousel-inner>.prev{
    top: 50%;
    transform: translateY(-50%);
}

这里,#product-detail用作覆盖引导程序样式的包装器.
另外,别忘了Wendorize transform.

Answer 3

使用以下命令，将图像定位在轮播视口的中心并将高度设置为 320px

.carousel-inner>.item>img {
    margin: 0 auto;
    height: 320px;
}

希望这对您有帮助