css - 推特 Bootstrap : Carousel: Vertically Center Image in Definded height Viewport

Question

我正在尝试找到一种方法，使轮播视口(viewport)内的图像垂直居中。目前图像工作正常，它正在将图像的大小调整为宽度上视口(viewport)的大小。但我想使用图像的中心并裁剪照片的顶部和底部。

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

这将使轮播高度为 300 像素，图像在垂直和水平方向上居中。