twitter-bootstrap Twitter Bootstrap 轮播不同高度的图片导致弹跳箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13391566/
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
Twitter Bootstrap carousel different height images cause bouncing arrows
提问by steve-gregory
I've been using Bootstrap's carousel class and it has been straightforward so far, however one problem I've had is that images of different heights cause the arrows to bounce up and down to adjust to the new height..
我一直在使用 Bootstrap 的 carousel 类，到目前为止它一直很简单，但是我遇到的一个问题是不同高度的图像会导致箭头上下弹跳以适应新的高度。
This is the code I'm using for my carousel:
这是我用于轮播的代码：
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="image_url_300height"/>
<div class="carousel-caption">
<h4>...</h4>
<p>...</p>
</div>
</div>
<div class="item">
<img src="image_url_700height" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
The problem is also illustrated in this jsfiddle(Admittedly not mine, I found this on a separate question while trying to solve this problem!)
这个jsfiddle也说明了这个问题（诚然不是我的，我在尝试解决这个问题时在一个单独的问题上发现了这个！）
My question is: How can I force the carousel to stay at a fixed height (second thumbnail in the fiddle) and center smaller images while keeping the captions and arrow in a static position relative to the carousel?
我的问题是：如何强制旋转木马保持在固定高度（小提琴中的第二个缩略图）并使较小的图像居中，同时将标题和箭头保持在相对于旋转木马的静态位置？
回答by jduprey
It looks like bootstrap less/CSS forces an automatic height to avoid stretching the image when the width has to change to be responsive. I switched it around to make the width auto and fix the height.
看起来像 bootstrap less/CSS 强制自动高度以避免在宽度必须更改以响应响应时拉伸图像。我切换它使宽度自动并固定高度。
<div class="item peopleCarouselImg">
<img src="http://upload.wikimedia.org/...">
...
</div>
I then define img with a class peopleCarouselImglike this:
然后我用这样的类定义 img peopleCarouselImg：
.peopleCarouselImg img {
width: auto;
height: 225px;
max-height: 225px;
}
I fix my height to 225px. I let the width automatically adjust to keep the aspect ratio correct.
我将高度固定为 225px。我让宽度自动调整以保持纵横比正确。
This seems to work for me.
这似乎对我有用。
回答by Khairul Anwar
回答by Mile Mijatovi?
Try with this jQuery code that normalize Bootstrap carousel slide heights
尝试使用此 jQuery 代码标准化 Bootstrap 轮播幻灯片高度
function carouselNormalization() {
var items = $('#carousel-example-generic .item'), //grab all slides
heights = [], //create empty array to store height values
tallest; //create variable to make note of the tallest slide
if (items.length) {
function normalizeHeights() {
items.each(function() { //add heights to array
heights.push($(this).height());
});
tallest = Math.max.apply(null, heights); //cache largest value
items.each(function() {
$(this).css('min-height', tallest + 'px');
});
};
normalizeHeights();
$(window).on('resize orientationchange', function() {
tallest = 0, heights.length = 0; //reset vars
items.each(function() {
$(this).css('min-height', '0'); //reset min-height
});
normalizeHeights(); //run it again
});
}
}回答by SteJ
Here is the solution that worked for me; I did it this way as the content in the carousel was dynamically generated from user-submitted content (so we could not use a static height in the stylesheet) - This solution should also work with different sized screens:
这是对我有用的解决方案；我这样做是因为轮播中的内容是从用户提交的内容动态生成的（因此我们不能在样式表中使用静态高度） - 此解决方案也适用于不同大小的屏幕：
function updateCarouselSizes(){
jQuery(".carousel").each(function(){
// I wanted an absolute minimum of 10 pixels
var maxheight=10;
if(jQuery(this).find('.item,.carousel-item').length) {
// We've found one or more item within the Carousel...
jQuery(this).carousel(); // Initialise the carousel (include options as appropriate)
// Now we iterate through each item within the carousel...
jQuery(this).find('.item,.carousel-item').each(function(k,v){
if(jQuery(this).outerHeight()>maxheight) {
// This item is the tallest we've found so far, so store the result...
maxheight=jQuery(this).outerHeight();
}
});
// Finally we set the carousel's min-height to the value we've found to be the tallest...
jQuery(this).css("min-height",maxheight+"px");
}
});
}
jQuery(function(){
jQuery(window).on("resize",updateCarouselSizes);
updateCarouselSizes();
}
Technically this is not responsive, but for my purposes the on window resizemakes this behave responsively.
从技术上讲，这不是响应式的，但出于我的目的，这on window resize使得它的行为具有响应性。
回答by MrAnyx
You can also use this code to adjust to all carousel images.
您还可以使用此代码来调整所有轮播图像。
.carousel-item{
width: 100%; /*width you want*/
height: 500px; /*height you want*/
overflow: hidden;
}
.carousel-item img{
width: 100%;
height: 100%;
object-fit: cover;
}
回答by Kyle Pennell
In case someone is feverishly googling to solve the bouncing images carousel thing, this helped me:
如果有人狂热地使用谷歌搜索来解决弹跳图像轮播的问题，这对我有帮助：
.fusion-carousel .fusion-carousel-item img {
width: auto;
height: 146px;
max-height: 146px;
object-fit: contain;
}
回答by Oliveira
The solution given earlier leads to a situation where images may be too small for the carousel box. A proper solution to the problem of bumping controls is to override Bootstraps CSS.
之前给出的解决方案会导致图像对于轮播框来说可能太小。碰撞控件问题的正确解决方案是覆盖 Bootstraps CSS。
Original code:
原始代码：
.carousel-control {
top: 40%;
}
Override the variable with a fixed value inside your own stylesheet (300px worked in my design):
在您自己的样式表中使用固定值覆盖变量（在我的设计中使用了 300px）：
.carousel-control {
top: 300px;
}
Hopefully this will solve your problem.
希望这能解决您的问题。
回答by Ankit Shukla
Include this JavaScript in your footer (after loading jQuery):
将此 JavaScript 包含在页脚中（加载 jQuery 后）：
$('.item').css('min-height',$('.item').height());
回答by awfullyawful
If you want to have this work with images of any height and without fixing the height, just do this:
如果你想在不固定高度的情况下使用任何高度的图像进行这项工作，只需执行以下操作：
$('#myCarousel').on("slide.bs.carousel", function(){
$(".carousel-control",this).css('top',($(".active img",this).height()*0.46)+'px');
$(this).off("slide.bs.carousel");
});
回答by CrandellWS
More recently I am testing this CSS source for the Bootstrap carousel
最近，我正在为 Bootstrap 轮播测试这个 CSS 源
The height set to 380 should be set equal to the biggest/tallest image being displayed...
设置为 380 的高度应设置为等于正在显示的最大/最高图像...
Please Vote up/down this answer based on usability testing with the following CSS thanks.
请根据使用以下 CSS 的可用性测试投票赞成/反对这个答案，谢谢。
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
max-height: 100%;
max-height: 380px;
margin-bottom: 60px;
height:auto;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}
/* Declare heights because of positioning of img element */
.carousel .item {
max-height: 100%;
max-height: 380px;
background-color: #777;
}
.carousel-inner > .item > img {
/* position: absolute;*/
top: 0;
left: 0;
min-width: 40%;
max-width: 100%;
max-height: 380px;
width: auto;
margin-right:auto;
margin-left:auto;
height:auto;
}
