Twitter Bootstrap旋转木马不同高度的图像导致弹跳箭头

我一直在使用Bootstrap的旋转木马类,到目前为止它已经很简单,但是我遇到的一个问题是,不同高度的图像会导致箭头上下反弹,以适应新的高度。

这是我用于我的轮播的代码:

<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">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> 

这个问题也在这个jsfiddle中说明过(不可否认,我试图解决这个问题的时候,在一个单独的问题上发现了这个问题!)

我的问题是:我怎么能强制旋转木马保持在一个固定的高度(小提琴的第二个缩略图)和中心较小的图像,同时保持标题和箭头相对于旋转木马的静态位置?

它看起来像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。 我让宽度自动调整,以保持纵横比正确。

这似乎为我工作。

试试这个(我使用SASS ):

 .carousel { max-height: 700px; overflow: hidden; .item img { width: 100%; height: auto; } } 

如果您愿意,可以将.carousel包装到.carousel

尝试使用这个标准化Bootstrap旋转木马幻灯片高度的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 }); } } 

前面给出的解决scheme导致图像可能对于转盘盒太小的情况。 碰撞控制问题的一个合适的解决scheme是覆盖Bootstraps CSS。

原始码:

 .carousel-control { top: 40%; } 

在自己的样式表中覆盖variables的固定值(在我的devise中使用了300px):

 .carousel-control { top: 300px; } 

希望这会解决你的问题。

在你的页脚中join这个JavaScript(加载jQuery之后):

 $('.item').css('min-height',$('.item').height()); 

如果你想要使用任何高度的图像并且不固定高度,只需要这样做:

 $('#myCarousel').on("slide.bs.carousel", function(){ $(".carousel-control",this).css('top',($(".active img",this).height()*0.46)+'px'); $(this).off("slide.bs.carousel"); }); 

这是为我工作的解决scheme; 我这样做是因为传送带中的内容是从用户提交的内容中dynamic生成的(所以我们无法在样式表中使用静态高度) – 此解决scheme还应该适用于不同大小的屏幕:

 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(); } 

从技术上讲,这是不响应,但对我的目的, on window resize使这种行为作出响应。

最近我正在testingBootstrap传送带的CSS源代码

设置为380的高度应设置为等于显示的最大/最高图像…

请根据可用性testing,使用以下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; } 

你可以在css文件中使用这一行:

 ul[rn-carousel] { > li { position: relative; margin-left: -100%; &:first-child { margin-left: 0; } } } 

如果有人疯狂地用Google来解决弹跳图像旋转木马的事情,这帮助了我:

 .fusion-carousel .fusion-carousel-item img { width: auto; height: 146px; max-height: 146px; object-fit: contain; } 
  .className{ width: auto; height: 200px; max-height: 200px; max-width:200px object-fit: contain; }