Question

我正在寻找使用bootstrap创建旋转木马。我希望以固定的比例显示图像（具有不同的宽度和高度）。我尝试使用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;

    }

Answer 1

这是你想要做的吗？宽度为100％，高度如何？

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

Answer 2

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

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

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

Twitter Bootstrap Carousel图像比率

2 个答案: