twitter-bootstrap 更改 bootstrap carousel 的高度 - 保持响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38695846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change height of bootstrap carousel - keeping it responsive
提问by user2953989
I have implemented a bootstrap carousel without overriding any styles. I want it to respond the way it does at the moment, so carousel and image respond down together without the image being cropped or distorted - but I would like the starting height of the carousel to be shorter.
我在没有覆盖任何样式的情况下实现了引导轮播。我希望它以目前的方式响应，因此轮播和图像一起响应而不会裁剪或扭曲图像 - 但我希望轮播的起始高度更短。
It responds like the one on this page: http://www.suug.co.uk/
它的响应类似于此页面上的响应：http: //www.suug.co.uk/
So at the moment when the browser is full width it is 650px high, I can see a height attribute hasn't been set, so I am wondering if I can keep the way it responds but change the starting height to say, 550px.
因此，当浏览器全宽时，高度为 650 像素，我可以看到尚未设置高度属性，所以我想知道是否可以保持其响应方式但将起始高度更改为 550 像素。
My code:
我的代码：
<div class="row">
<div class="carousel slide" id="bannerFrontPage">
<div class="carousel-inner">
<div class="item"><a href=""><img src=""></a></div>
<div class="item"><a href=""><img src=""></a></div>
<div class="item"><a href=""><img src=""></a></div>
</div>
<a class="left carousel-control" data-slide="prev" href="#bannerFrontPage"><span class="sr-only">Previous</span></a>
<a class="right carousel-control" data-slide="next" href="#bannerFrontPage"> <span class="sr-only">Next</span></a>
</div>
</div>
回答by ragnar
My solution was the following:
我的解决方案如下：
.carousel img {
max-height: 300px;
margin: 0 auto;
}
You can also set the max-height to relative measures :)
您还可以将最大高度设置为相对度量:)
回答by Steff Yang
Here is a JSFiddle that may help you: http://jsfiddle.net/gh4Lur4b/140/
这是一个可以帮助您的 JSFiddle：http: //jsfiddle.net/gh4Lur4b/140/
You can change the height of your carousel in the class of .carousel-inner, however the html structure is a bit different from yours, you can adjust it to fit your requirements.
您可以在 的类中更改轮播的高度.carousel-inner，但是 html 结构与您的有点不同，您可以调整它以满足您的要求。
.carousel-inner{
height: 550px;
}
With only adjusting the height of the carousel may cause your images to be squashed, so I quite recommend to customize the responsiveness of your carousel using media queries (according to Bootstrap's documentation):
仅调整轮播的高度可能会导致您的图像被压扁，因此我强烈建议您使用媒体查询自定义轮播的响应能力（根据 Bootstrap 的文档）：
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Hope that the answer can help you!
希望答案能帮到你！
回答by rockey dsouza
You only have to add below line in your css
您只需要在 css 中添加以下行
.bx-wrapper img{height: 550px; background-position: center; background-size: cover;}
Hope its working :)
希望它的工作:)
