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">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</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; }
