我在我的网站上使用最新版本的Bootstrap。每次旋转木马滑动时,幻灯片图像下方都会出现白色背景。
这是从哪里来的,如何摆脱它?图像尺寸不同。
答案 0 :(得分:1)
可以是旋转木马的默认背景颜色或下面的东西。
要找到它的起源,请尝试覆盖旋转木马或身体或html的背景颜色,或者可以使用不同的背景颜色在其下方的容器。避免将图像的高度更改为
height:100% ; or height:"100vh";
如果上述方法不起作用,还要设置html / body元素的高度
答案 1 :(得分:1)
您需要将图像的高度设置为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%。如果您不想搞砸其中任何一个,您可以将图片大小调整到与所有网页图像缩放器相同的大小,您只需谷歌调整大小图像即可找到一个。
希望这一切都有帮助