引导轮播在 Chrome 和 Opera 中没有响应 [重复]答案

【问题标题】：Bootstrap carousel not responsive in Chrome and Opera [duplicate]引导轮播在 Chrome 和 Opera 中没有响应 [重复]
【发布时间】：2017-02-22 10:32:59
【问题描述】：

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

我已经尝试了所有关于 SO 的答案，例如将 min-width: 100%; 设置为 .carousel img 类，依此类推。我的代码直接来自 Bootstrap 网站，我注意到其中的图像做了同样的事情。

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

感谢任何帮助。

【问题讨论】：

请分享您的代码
我的代码在 Bootstrap 网站上完全如下：v4-alpha.getbootstrap.com/components/carousel。我没有添加任何额外的东西。
一定有差异，否则你的代码不会有差异

标签： html css twitter-bootstrap bootstrap-4 bootstrap-carousel

【解决方案1】：

我想你已经为你的图片指定了高度。

只要确保高度为自动，宽度为 100%。

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

【讨论】：

很遗憾，这不起作用。我的身高是自动的。
你试过 width:100%; ?
我什么都试过了，我可能选错了类。
好的，height: 100% 属性实际上帮助我解决了这个问题。不过感谢您的帮助。
不会在小设备上拉伸图片吗？

【解决方案2】：

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

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

【讨论】：

是的，确实如此。这里和那里有不一致的地方。

【解决方案3】：

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

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

相当于将图片的最大宽度设置为100%

【讨论】：