【发布时间】：2016-07-15 19:10:18
【问题描述】：
我有一个固定高度的引导轮播。这是 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%）和“正常”图像（高度/宽度比例合适）装满所有的旋转木马。
这就是我想要做的（第一张图片是一个非常宽的例子，第二张图片非常高，最后一张有一个“不错”的比例）。
我怎样才能做到这一点？我尝试了Make Bootstrap's Carousel both center AND responsive? 和其他在 Google 上找到的技巧，但没有人这样做。
【问题讨论】：
-
由于您从模板共享未处理的代码，因此很难为您提供帮助。如果您共享呈现的 HTML 代码会更好，也许有简单的解决方案。如果我理解你的问题，你只需要完美对齐滑块中的图像（垂直和水平）。
-
@MarcosPérezGude 感谢您的回答，我使用呈现的 HTML 编辑了帖子（用于带有 3 张图像的轮播）。我需要的是使图像完美居中，但如果它太宽或太窄，则不要拉伸它，并且没有隐藏它的一部分（我尝试了许多隐藏部分图片的解决方案）
标签： html css image twitter-bootstrap