0

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

min-width: 100%;我在没有运气的情况下尝试了所有关于 SO 的答案,例如设置.carousel img课程等等。我的代码直接来自 Bootstrap 网站,我注意到其中的图像做了同样的事情。

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

任何帮助表示赞赏。

在此处输入图像描述

4

3 回答 3

2

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

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

于 2017-02-22T11:50:52.767 回答
2

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

只要确保保持高度自动和宽度 100%。

.carousel img{ width:100%; height:auto;}
于 2017-02-22T10:35:54.777 回答
0

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

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

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

于 2017-02-22T11:39:35.303 回答