9

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

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

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

4

6 回答 6

20

我通过指定 .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 像素，图像垂直和水平居中。

于 2015-02-26T23:38:15.047 回答
6

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

#product-detail .carousel-inner{
    高度：500px；
}

#product-detail .carousel-inner>.active{
    位置：相对；
    最高：50%；
    变换：translateY（-50%）；
}
#product-detail .carousel-inner>.next,
#product-detail .carousel-inner>.prev{
    最高：50%；
    变换：translateY（-50%）；
}

在这里，#product-detail用作覆盖引导样式的包装器。
另外，别忘了加温transform。

于 2014-03-19T12:31:52.733 回答
1

这可能对你有帮助

试试这个插件

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

看看这里。

Twitter Bootstrap 垂直缩略图轮播

于 2013-11-19T09:06:52.447 回答
1

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

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

希望这对您有所帮助

于 2013-03-11T08:13:55.133 回答
0

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

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

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

于 2014-01-10T01:10:52.193 回答
0

我也想在轮播中居中图像

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

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

于 2015-08-19T09:01:32.413 回答