Bootstrap轮播在Chrome和Opera中没有响应

Question

我有一个问题，当调整窗口大小时，Bootstrap轮播会在旋转木马内伸展或挤压我的图像。即使宽度和高度属性与图像大小匹配，它也会垂直拉伸我的图像。

我在没有运气的情况下尝试了所有答案，例如将min-width: 100%;设置为.carousel img类，依此类推。我的代码直接来自Bootstrap网站，我注意到它里面的图像做了同样的事情。

奇怪的是它在Edge和Firefox中完美地调整了窗口。旋转木马中的图像看起来与预期一样，但在Chrome和Opera中打开会产生完全不同的东西。

感谢任何帮助。

Answer 1

我认为您已指定图像的高度。

请确保自动保持高度和宽度100％。

.carousel img{ width:100%; height:auto;}

Answer 2

Bootstrap 4仍处于alpha状态，因此您可能会遇到一些不稳定因素。轮播问题是Bootstrap 4中的一个已知问题。

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

Answer 3

听起来并不聪明，但在img标签上使用“img-responsive”类？

// Your carousel code ...
<img class="img-responsive .....>
// code ...

相当于将图像的最大宽度设置为100％