0

我正在寻找使用引导程序创建一个轮播。我希望图像（具有不同宽度和高度）以固定比例显示，. 我尝试使用 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;

    }
4

2 回答 2

2

这是你想要做的吗？100％的宽度和高度跟随？

.carousel .item > img {
   min-width: 100%;
   height: auto;
}
于 2013-08-02T23:22:03.890 回答
0

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

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

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

于 2017-06-29T17:15:48.393 回答