twitter-bootstrap-3 - 如何为 bootstrap 3.0 carousel item 设置 auto 高度

Question

我正在尝试使引导轮播内的图像在高度第一、宽度第二方面具有响应性。这是因为我添加到旋转木马的图像大部分高度大于宽度，尽管我应该将 css 写在无论图像尺寸如何看起来都一样的地方。

我在我的样式上覆盖类而不是修改 Bootstrap 样式表，因为我更喜欢使用 CDN 加载 Bootstrap 。

我要添加到我的样式中的类是

.carousel-inner > .item > img {
    position: absolute;
    top: 0px;
    left: 0px;
    height: auto;
    max-width: 100%;
}

height: auto 和 max-width: 100% 效果很好。我遇到的问题是 .carousel .item 的高度为 500px。 bootstrap.css 第 49 行。

.carousel .item {
    height: 500px;
    background-color: #777;
}

我无法为上面显示的类提供自动高度，因为这样图像就不可见了。如果我这样保留它，高度超过 500 像素的图像会被截断，较小的图像会使轮播看起来不成比例。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

这似乎可行。

我将轮播放置在轮播容器 div 中，并将以下内容添加到我的 CSS 中:

.carousel, .carousel-inner > .item {
  display: run-in;
  width: 100%;
  height: auto!important;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  height: auto;
  max-width: 100%;
  line-height: 1;
}

.carousel-container {
    margin-left:0;
}