我有一个固定高度的引导轮播。这是 CSS:
.carousel-custom .carousel-outer {
position: relative;
}
@media(min-width: 992px){
.carousel-custom {
margin-top: 20px;
.carousel-inner {
height: auto;
.item {
height:500px;
line-height:300px;
}
}
}
}
@media(max-width: 991px){
.carousel-custom {
margin-top: 20px;
.carousel-inner {
height: auto;
.item {
height:300px;
line-height:300px;
text-align:center;
}
}
}
}
这是我的标记:
<div id="carousel-custom-1188" class="carousel slide carousel-custom" data-ride="carousel">
<div class="carousel-outer">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459261752/w8edcuvz1yl3uc4g4o34.jpg" alt="Jinallzupvfazqqr67nd">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459175684/w4ueot8o49dh2fyulv0x.jpg" alt="K1yov5hpur8mgsb9r15p">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459178926/fwlmuroj2wlz7czrsha0.jpg" alt="Lqfandhmutdkppjrl932">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-custom-1188" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-custom-1188" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators mCustomScrollbar">
<li data-target="#carousel-custom-1188" data-slide-to="0" class="active">
<img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268139/jinallzupvfazqqr67nd.png" alt="Jinallzupvfazqqr67nd">
</li>
<li data-target="#carousel-custom-1188" data-slide-to="1" class="">
<img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268146/k1yov5hpur8mgsb9r15p.png" alt="K1yov5hpur8mgsb9r15p">
</li>
<li data-target="#carousel-custom-1188" data-slide-to="2" class="">
<img style="height:50px; width: 50px;" class="img-responsive" src="http://res.cloudinary.com/dltbqhact/image/upload/v1459268157/lqfandhmutdkppjrl932.png" alt="Lqfandhmutdkppjrl932">
</li>
</ol>
</div>
</div>
问题是我的图像非常宽,其他图像非常窄和高,而其他图像在同一个旋转木马中具有良好的高度/宽度。
我想让宽图像垂直居中(宽度为 100%),高图像水平居中(高度为 100%)和“正常”图像(高度/宽度比例合适)填充所有旋转木马。
这是我正在尝试做的事情(第一张图片是一个非常宽的图片,第二张图片非常高,最后一张图片的比例“不错”)。
我怎么能做到这一点?我试过 让 Bootstrap 的 Carousel 既居中又响应? 和在谷歌上发现的其他技巧,但没有人这样做。
原文由 Graham Slick 发布,翻译遵循 CC BY-SA 4.0 许可协议
由于
.item
元素是相对定位的,您可以绝对定位img
元素。给.item
元素一个固定的高度,将有助于垂直和水平对齐内部的图像。我敢肯定有很多不同的方法可以做到这一点,这里是一个例子。希望能帮助到你。