【发布时间】：2016-07-06 17:27:05
【问题描述】：
我在我的网站上使用最新版本的 Bootstrap。每次轮播滑动时，幻灯片图像下方都会出现一个白色背景。
这是从哪里来的，我该如何摆脱它？图片大小不一。
【问题讨论】：
标签： javascript jquery html css twitter-bootstrap
【发布时间】：2016-07-06 17:27:05
【问题描述】：
可能是轮播的默认背景颜色或下面的东西。
要找到它的来源，请尝试覆盖 carousel 或 body 或 html 的背景颜色，或者可能是它下面的容器，具有不同的背景颜色。为了避免将图像的高度更改为
height:100% ; or height:"100vh";
如果上述方法不起作用，请为 html/body 元素设置高度
【讨论】：
-
height 100% 不起作用，将 height 设置为 100vh 存在问题，它会拉伸图片并且看起来很丑。
-
那你应该使用漂亮的大图。
-
或者您可以将所有图像设置为相同的高度，它看起来会比这更好。
您需要将图像的高度设置为 100%，以便它覆盖轮播容器的整个高度。为此，您必须将所有图像父容器设置为 100%，还必须为 .carousel 指定特定高度。因此，您必须将.carousel 设置为高度：500px，然后将.carousel-inner、.item 和.item img 全部设置为height: 100%;。如果您想保留图像的分辨率，那么您可以摆脱图像标签并为每张幻灯片提供另一个类，例如。 .slide-one、.slide-two、.slide-three 等。然后，您可以为这些类中的每一个提供背景图像并将其设置为覆盖，但您仍然必须将轮播高度设置为某个高度，然后将.carousel-inner 和.item 设置为height: 100%。这是一个示例小提琴，我向人们展示如何使他们的轮播真正响应。它使用底部填充到.carousel-item，然后将其设置为百分比。然后用这个填充底部百分比来获得你想要的高度。然后将每个项目设置为具有背景图像。这是您可能想看的小提琴
但要让您的轮播功能正常工作，您需要像我之前所说的那样将图像及其父容器高度设置为 100%。如果您不想弄乱其中任何一个，您可以使用许多网络图像调整器将您的图像调整为相同大小，您可以通过谷歌调整图像大小来找到一个。
希望这对你有帮助
【讨论】：