CSS Bootstrap 更改轮播高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28589911/
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
Bootstrap change carousel height
提问by ttmt
I have a jsfiddle here - http://jsfiddle.net/gh4Lur4b/8/
我这里有一个 jsfiddle - http://jsfiddle.net/gh4Lur4b/8/
It's a full width bootstrap carousel.
这是一个全宽引导轮播。
I'd like to change the height and still keep it full width.
我想改变高度并仍然保持全宽。
Is the height determined by the image height.
是由图像高度决定的高度。
How can I chanhe the height of the carousel and keep it 100% width.
我怎样才能改变旋转木马的高度并保持 100% 的宽度。
.carousel-inner{
// height: 300px;
}
.item, img{
height: 100% !important;
width: 100% !important;
border: 1px solid red;
}
回答by Bart Jedrocha
回答by Shailesh Bhardwaj
From Bootstrap 4
来自Bootstrap 4
.carousel-item{
height: 200px;
}
.carousel-item img{
height: 200px;
}
回答by Brandon Walton
Thank you! This post is Very Helpful. You may also want to add
谢谢！这篇文章很有帮助。您可能还想添加
object-fit:cover;
适合对象：封面；
To preserve the aspect ration for different window sizes
保留不同窗口大小的纵横比
.carousel .item {
height: 500px;
}
.item img {
position: absolute;
object-fit:cover;
top: 0;
left: 0;
min-height: 500px;
}
回答by GoodnessGoodness Chi
like Answers above, if you do bootstrap 4 just add few line of css to .carousel , carousel-inner ,carousel-item and img as follows
.carousel .carousel-inner{
height:500px
}
.carousel-inner .carousel-item img{
min-height:200px;
//prevent it from stretch in screen size < than 768px
object-fit:cover
}
@media(max-width:768px){
.carousel .carousel-inner{
//prevent it from adding a white space between carousel and container elements
height:auto
}
}
