Twitter Bootstrap：轮播：在定义高度视口中垂直居中图像

Posted 2023-03-06

【中文标题】Twitter Bootstrap：轮播：在定义高度视口中垂直居中图像

【英文标题】：Twitter Bootstrap: Carousel: Vertically Center Image in Definded height Viewport

【发布时间】：2013-01-17 06:33:28

【问题描述】：

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

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

非常感谢任何帮助。我想要它，这样如果他们上传任何尺寸的照片，它就可以被认为是可用的。

【问题讨论】：

如果他们中的任何一个对您有帮助，请选择一个有效的答案

【参考方案1】：

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

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

希望对你有所帮助

【讨论】：

哈哈，他说垂直对齐

这只会水平对齐图像

【参考方案2】：

这可能对你有帮助

试试这个插件

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

然后看看这里。

Twitter Bootstrap Vertical Thumbnail Carousel

【参考方案3】：

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

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

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

【参考方案4】：

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

#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加个字。

【讨论】：

谢谢，这解决了我的问题。此外，为了确保它不会继续缩放到它太小以至于白边进入的点，我在包装器中添加了一个 min-width:'768px'。希望这对其他人也有帮助

这很完美！虽然 oO

它适用于图像，但标题隐藏在轮播视口下方。如何将它们拉到位？

@xtian 设置供应商前缀我相信例如peter.sh/experiments/vendor-prefixed-css-property-overview

这个技巧在 Bootstrap v3.3.2 上不再起作用；知道为什么吗？

【参考方案5】：

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

【讨论】：

我试过this、this 和this，但都没有奏效。但是这个解决方案非常有效，谢谢先生！

【参考方案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");

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