我一直在使用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中得到了说明(当然不是我的,我在尝试解决这个问题时在另一个问题上发现了这个问题!)
我的问题是:我如何强制旋转木马保持在固定的高度(小提琴中的第二个缩略图)并居中较小的图像,同时保持标题和箭头相对于旋转木马的静态位置?
发布于 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。我让宽度自动调整,以保持宽高比正确。
这似乎对我很有效。
发布于 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
等)方面具有更大的灵活性。
为了提高响应速度,您需要使用媒体查询。
编辑:谢谢大家,我不知道这还在搜索中。投票支持其他开发者吧!
发布于 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();
}
https://stackoverflow.com/questions/13391566
复制相似问题