CSS Twitter Bootstrap：旋转木马：在定义的高度视口中垂直居中图像

Twitter Bootstrap: Carousel: Vertically Center Image in Definded height Viewport

提问by David Leonard

I am attempting to find a way to verticially center an image inside of my viewport for the carousel. Currently the images are working fine and it is resizing the image to the size of the viewport on the width. But I want to use the center of the image and crop the top and bottom of the photo.

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

Here is the HTML:

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

and the small bit of css:

和一点点css：

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

Any help is greatly appreciated. I want it so that if they upload any size photo it can be considered usable.

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

回答by Naragot

I have solved this problem by specifying the .item height and making the image in it absolutely positioned:

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

.item {
height: 300px;
}

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

This will make a carousel 300px height with images centered vertically and horizontally.

这将使旋转木马高度为 300 像素，图像垂直和水平居中。

回答by grigson

If you don't know the height of images, you can use next styles

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

#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%);
}

here, #product-detailis used as wrapper to override bootstrap styles.
also, don't forget to wendorize transform.

在这里，#product-detail用作包装器来覆盖引导程序样式。
另外，不要忘记 wendorize transform。

回答by YorickH

Use the following, this positions the image in the center of the carousel viewport and sets the height to 320px

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

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

Hoped this helped you out

希望这对你有帮助

回答by Shivam Pandya

This Might be help you

这可能会帮助你

Try Out this Plugin

试试这个插件

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

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

And take a look over here.

看看这里。

Twitter Bootstrap Vertical Thumbnail Carousel

Twitter Bootstrap 垂直缩略图轮播

回答by cavemanstyle

I added just a little bit to YorickH answer

我在 YorickH 的回答中加了一点

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

This makes sure tje images stretch to the end of the screen (or your container), and increases the height a little so the images don't look so stretched and squished.

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

回答by Martin Omacht

I wanted to center images in carousel either

我想在轮播中居中图像

grigson's answer worked great on firefox, but did not work on Chrome. So after a lot of struggling I came up with this solution:

grigson 的回答在 Firefox 上效果很好，但在 Chrome 上不起作用。所以经过很多努力，我想出了这个解决方案：

Put the images as a background of div.item, because that way you can easily position them without disturbing the layout:

将图像作为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");
}

It may not be the best way to do it, but it works really well for me.

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