[英]Bootstrap change carousel height
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;
}
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;
}
For Bootstrap 4 and above replace .item
with .carousel-item
对于Bootstrap 4及更高版本,将 .item 替换为.item
.carousel-item
.carousel .carousel-item {
height: 500px;
}
.carousel-item img {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
min-height: 500px;
}
From Bootstrap 4从引导程序 4
.carousel-item{
height: 200px;
}
.carousel-item img{
height: 200px;
}
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
}
}
if someone comes here looking exactly for what the headline points to, this will help (remember it's OK to use jQuery in Bootstrap v4):如果有人来这里寻找标题所指的内容,这将有所帮助(记住在 Bootstrap v4 中使用 jQuery 是可以的):
$.fn.normalizeHeight = function () {
$(this).css("height", Math.max.apply(null, $(this).children().map(function () {
return $(this).height();
})) + "px");
return this;
};
It would simply be called with:它会被简单地调用:
$("#slider .carousel-inner").normalizeHeight();
$(window).on('resize', function () {
$("#slider .carousel-inner").normalizeHeight();
});
It is ES5 compliant + would work in other needed equal child height.它符合 ES5 标准 + 可以在其他需要的同等儿童身高下工作。
For Bootstrap 4对于引导程序 4
In the same line as image add height: 300px;
在与图像相同的行中添加height: 300px;
<img src="..." style="height: 300px;" class="d-block w-100" alt="image">
Try following it should work:尝试遵循它应该可以工作:
.carousel .carousel-item {
max-height:550px;
}
.carousel-item img {
object-fit:cover;
max-height:550px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.