Bootstrap 4 轮播图未响应图片。

Question

看这个链接： http://www.consultacultura.it/portale_comunale_della_cultura.asp?IDcomune=1 轮播图像与下方的图像不同，它们没有响应式。它们具有相同的img-fluid类。

- Sergio

Answer 1

这是Bootstrap 4 Alpha 6中已知的一个问题...

https://github.com/twbs/bootstrap/issues/21611

作为一个解决方法，您可以使用...

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

http://www.codeply.com/go/0QUU06MiIL

- Zim

---

我自己纠正一下... 问题只出在Chrome浏览器上，其他浏览器都正常。 关于"display:block;"，它可以使图像具有响应性，但会破坏幻灯片演示（所有图像同时显示）。 - Sergio

它应该只被应用于所描述的活动项目。http://www.codeply.com/go/0QUU06MiIL - Carol Skelly

谢谢，同时根据Github 21611问题中描述的style="width:100%; height:100%"工作正常。这是我第一次在stackoverflow上，非常满意！ - Sergio

Answer 2

对于我来说，这种解决方法在桌面和移动设备上都没有起作用。我稍微调整了提出的解决方法，使其可以适应 -方向-。

@media (orientation: portrait) { 
    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
        display: block;
        width:100%;
        height:auto;
    }
}

@media (orientation: landscape) { 
    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
        display: block;
        width:100%;
        height:96vh;
    }
}

- ben Thijssen