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用作覆盖引导程序样式的包装器另外，不要忘记transform。{/ p>

Answer 3

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

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

希望这能帮到你

Answer 4

这可能会帮助你

试用此插件

https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

看看这里。

Twitter Bootstrap Vertical Thumbnail Carousel

Answer 5

我在YorickH回答中添加了一点点

.carousel-inner>.item>img {
margin: 0 auto;
height: 600px;
width: 100%;
}

这样可以确保图像延伸到屏幕的末端（或容器），并稍微增加高度，使图像看起来不那么拉伸和挤压。

Answer 6

我想将图像置于旋转木马中心

grigson的回答在firefox上运行得很好，但在Chrome上无效。经过多次努力，我想出了这个解决方案：

将图像作为 div.item 的背景，因为这样您可以轻松定位它们而不会打扰布局：

.carousel-inner .item {
    width: 100%; /* Your width */
    height: 500px; /* Your height */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* This also makes sure it fills the whole div */
}

/* add the images to divs */
div.item:nth-of-type(1) {
    background-image: url("../img/carousel-photos/1.jpg");
}

div.item:nth-of-type(2) {
    background-image: url("../img/carousel-photos/2.jpg");
}

div.item:nth-of-type(3) {
    background-image: url("../img/carousel-photos/3.jpg");
}

div.item:nth-of-type(4) {
    background-image: url("../img/carousel-photos/4.jpg");
}

这可能不是最好的方法，但对我来说效果非常好。

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

6 个答案: