Twitter Bootstrap 轮播图片比例答案

【问题标题】：Twitter Bootstrap Carousel Image RatioTwitter Bootstrap 轮播图片比例
【发布时间】：2017-06-30 01:15:48
【问题描述】：

我希望使用引导程序创建一个轮播。我希望图像（具有不同宽度和高度）以固定比例显示，.我尝试使用 CSS 中断和图像比例中断并继承轮播的大小。

CSS

.carousel .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 702px;
max-width: none;

}

html 代码：

<div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="active item">
        <img src="image1.jpg"/>
        </div>
        <div class="item">
        <img src="image1.jpg"/>
        </div>
      </div>
    </div>

我应该寻找另一种保持图像比例的轮播解决方案还是有解决方法？

编辑 1：

    .carousel .item > img {
      max-width: 100%;
      height: 100%;
      width: auto;
      text-align: center;
      margin: 0 auto;

    }

【问题讨论】：

你到底是什么意思？要将图像拉伸到容器大小还是仅填充宽度？

标签： html css twitter-bootstrap

【解决方案1】：

这是你想要做的吗？宽度为 100%，高度跟随？

.carousel .item > img {
   min-width: 100%;
   height: auto;
}

【讨论】：

好吧，我解决了这个问题，固定高度和自动宽度。

【解决方案2】：

新的 Bootstrap 4 Carousel 不会支持 height:auto 修复，因为它使用 flexbox，因此您必须按比例计算元素的高度，并且在大多数情况下初始尺寸是未知的，因此您必须使用 JS 计算或使用绝对位置图像会打开一罐新的蠕虫，但是如果您正在寻找肮脏的修复方法，我建议您这样做

.carousel-item img {
        width: 100%;
        height: 68vw; /* play with this */
    }

演示https://codepen.io/nodws/pen/gRozMM

【讨论】：