Twitter Bootstrap旋转木马不同高度的图像导致箭头跳动
Twitter Bootstrap旋转木马不同高度的图像导致箭头跳动
提问于 2012-11-15 12:25:39
我一直在使用Bootstrap的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>这个问题也在这个jsfiddle中得到了说明(当然不是我的，我在尝试解决这个问题时在另一个问题上发现了这个问题！)
我的问题是:我如何强制旋转木马保持在固定的高度(小提琴中的第二个缩略图)并居中较小的图像，同时保持标题和箭头相对于旋转木马的静态位置？
回答 14
Stack Overflow用户
回答已采纳
发布于 2012-11-22 00:10:12
它看起来像bootstrap less/CSS强制自动高度，以避免在宽度必须更改以响应时拉伸图像。我改变了它，使宽度自动，并固定高度。
<div class="item peopleCarouselImg">
<img src="http://upload.wikimedia.org/...">
...
</div>然后，我使用一个类peopleCarouselImg定义img，如下所示：
.peopleCarouselImg img {
width: auto;
height: 225px;
max-height: 225px;
}我把身高调到225px。我让宽度自动调整，以保持宽高比正确。
这似乎对我很有效。
Stack Overflow用户
发布于 2014-02-12 15:45:23
试试这个(我用的是SASS)：
/* SASS */
.carousel {
max-height: 700px;
overflow: hidden;
.item img {
width: 100%;
height: auto;
}
}如果愿意，您可以将.carousel包装到.container中。
/* CSS */
.carousel {
max-height: 700px;
overflow: hidden;
}
.carousel .item img {
width: 100%;
height: auto;
}关键是要保持高度的一致性。这就是max-height的用武之地，以限制较大的图像。
或者，您可以将图像设置为背景图像，使您在高度和图像定位(例如background-size、background-position等)方面具有更大的灵活性。
为了提高响应速度，您需要使用媒体查询。
编辑:谢谢大家，我不知道这还在搜索中。投票支持其他开发者吧！
Stack Overflow用户
发布于 2017-01-26 05:49:31
尝试使用此jQuery代码来标准化引导转盘幻灯片高度
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
});
}
}
/**
* Wait until all the assets have been loaded so a maximum height
* can be calculated correctly.
*/
window.onload = function() {
carouselNormalization();
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13391566
复制相关文章
相似问题