twitter-bootstrap 在 Bootstrap Carousel 上设置最大高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35352336/
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
Setting a max-height on a Bootstrap Carousel
提问by James Ives
I'm attempting to enforce a max-height on a Bootstrap carousel. The idea is that any images which are too tall will appear with black bars to the left and right so it maintains its aspect ration without stretching the page down too far. The content being pumped into the carousel will often vary in height which is why I want to do this.
我正在尝试在 Bootstrap 轮播上强制执行最大高度。这个想法是任何太高的图像都会在左侧和右侧出现黑条，因此它保持其纵横比而不会将页面向下拉伸得太远。被泵入轮播的内容通常会在高度上有所不同，这就是我想要这样做的原因。
Currently in my Carousel the images which are around 1024x768 look fine, but if a tall piece of content is placed into it it gets cut off at the bottom, takes up the spot for the image caption underneath and still stretches the bottom out.
目前在我的 Carousel 中，大约 1024x768 的图像看起来不错，但是如果将一段高大的内容放入其中，它会在底部被切断，占据下方图像标题的位置，并且仍然将底部拉长。
.carousel {
width: auto;
max-height: 768px;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.carousel {
/* Pushes out the margins on mobile devices so it lines up with the article body. */
margin-left: -20px !important;
margin-right: -20px !important;
width: inherit !important;
}
}
.carousel:hover {
visibility: visible;
color: white;
bottom: 17%;
}
.carousel .carousel > .carousel-control {
visibility: hidden;
}
.carousel .carousel-control {
visibility: visible;
color: white;
}
.carousel .carousel-inner {
background-color: #000000;
}
.carousel .carousel-caption {
position: relative;
left: auto;
right: auto;
padding-bottom: 0;
}
.carousel .item img {
margin-left: auto;
margin-right: auto;
min-width: 100%;
}
What would be the best way to enforce a height restriction on the carousel while still having the content maintain its aspect ratio, regardless of how tall it is?
无论内容有多高，在保持内容保持其纵横比的同时对旋转木马实施高度限制的最佳方法是什么？
JSFiddle:https://jsfiddle.net/1exapzk8/3/
JSFiddle：https ://jsfiddle.net/1exapzk8/3/
回答by max
回答by vivek gupta
For Bootstrap:
对于引导程序：
if the aspect ratio is not a priority then you can also try following code:
如果纵横比不是优先事项，那么您也可以尝试以下代码：
<div class="carousel-item">
<div class="container" style="height: 500px;">
<img class="d-block img-fluid" src="img/carousel/img-2.png" alt="Second slide">
</div>
</div>
回答by alvseek
if you want to maintain responsive on the width, you can use javascript/jquery.
如果你想保持对宽度的响应，你可以使用 javascript/jquery。
I used jquery to maintain it's height to 50% of the width
我使用 jquery 将其高度保持为宽度的 50%
$(function(){
var SetCarouselHeight = function() {
$("#myCarousel .item > img").height(function(){
return $("#myCarousel").width() * 0.5;
});
}
SetCarouselHeight();
$(window).resize(function(){
SetCarouselHeight();
});
});
回答by Omkar Kumbhar
This script runs for 1st part of slider:
此脚本针对滑块的第一部分运行：
$(document).ready(function(){
var height=$(".cal-caro").height();
//alert("Height of div: " +height);
$(".cal-box").css('min-height',height+'px');
});
