在Bootstrap Carousel上设置最大高度

Question

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

目前在我的Carousel中,大约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并从中删除max-height .carousel:

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

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

的jsfiddle