Question

我正试图在Bootstrap轮播上强制执行max-height。这个想法是，任何太高的图像都会出现左右黑条，因此它保持其纵横比，而不会将页面拉得太远。被泵入旋转木马的内容通常会有不同的高度，这就是我想要这样做的原因。

目前在我的旋转木马中，大约1024x768的图像看起来很好，但是如果放入一大块内容，它会在底部被截断，占据下方图像标题的位置，仍然会拉出底部

.carousel {
  width: auto;
  max-height: 768px;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .carousel {
    /* Pushes out the margins on mobile devices so it lines up with the article body. */
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: inherit !important;
  }
}

.carousel:hover {
  visibility: visible;
  color: white;
  bottom: 17%;
}

.carousel .carousel > .carousel-control {
  visibility: hidden;
}

.carousel .carousel-control {
  visibility: visible;
  color: white;
}

.carousel .carousel-inner {
  background-color: #000000;
}

.carousel .carousel-caption {
  position: relative;
  left: auto;
  right: auto;
  padding-bottom: 0;
}

.carousel .item img {
  margin-left: auto;
  margin-right: auto;
  min-width: 100%;
}

对于旋转木马强制执行高度限制的最佳方法是什么，同时仍然保持其内容长宽比，无论其高度如何？

JSFiddle： https://jsfiddle.net/1exapzk8/3/

Answer 1

尝试此CSS并从.carousel删除最大高度：

.carousel .item img {
  max-height: 768px;
  min-width: auto;
}

我在底部添加了代码以覆盖Bootstrap样式。

的 JSFIDDLE

Answer 2

对于Bootstrap：

如果宽高比不是优先级，那么您也可以尝试以下代码：

<div class="carousel-item">
    <div class="container" style="height: 500px;">
         <img class="d-block img-fluid" src="img/carousel/img-2.png" alt="Second slide">
    </div>
</div>

Answer 3

如果要保持宽度响应，可以使用javascript / jquery。

我使用jquery将其高度保持为宽度的50％

$(function(){
    var SetCarouselHeight = function() {
        $("#myCarousel .item > img").height(function(){
            return $("#myCarousel").width() * 0.5;
        });
    }

    SetCarouselHeight();
    $(window).resize(function(){
        SetCarouselHeight();
    }); 
});

Answer 4

此脚本在滑块的第一部分运行：

$(document).ready(function(){

  var height=$(".cal-caro").height();
  //alert("Height of div: " +height);
  $(".cal-box").css('min-height',height+'px');

});

在Bootstrap Carousel上设置最大高度

4 个答案:

的 JSFIDDLE