在小型设备中查看时轮播滑块显示额外 space

Question

我有一个在大屏幕上完美运行的轮播滑块。但是当在小型设备上查看时，会添加额外的 space 灰色背景。同样可以在 SITE LINK 的 firefox 中的 (ctrl+shift+m) 中查看。在 firebug 中查看时，我注意到这可能是由于

element.style {
    height:345.6px
}

如果我去掉高度，它就完美了。如何解决这个问题？

更新：如果没有出现滑块，请select将城市更改为Guwahati

Answer 1

我需要更多信息来帮助您。你在使用某种模板吗？您可以访问原始 HTML 或 CSS 吗？请更清楚地说明我们如何提供帮助。

编辑：没错，这应该是一个评论。对于那个很抱歉。为元素指定一个特定的 class 并覆盖模板 CSS。是这样的： HTML:

<section id="home" class="customHeightStyle home-section home-parallax home-fade bg-dark-30" data-background="" style="height: 480.24px; top: 0px; background-position: 82px 38px, 44px 31px, 22px 15px;">

CSS:

.customHeightStyle {
  height: auto !important;
}

Answer 2

在 html 中，为父级 .item 添加与 background 相同的图像。并使用 background-size:cover;

对于小屏幕尺寸，使用 opacity 或 visibility 隐藏图像。

将 .carousel、.carousel-inner 和 .item 的高度增加到 100%。

Answer 3

因为您设置了容器元素的高度，然后将图像样式设置为 100% 宽度。

上图试图保持最佳纵横比。您需要正确设置容器的高度，然后尝试使用 background-image and background-size 属性.

将图像作为封面照片添加到各个滑块

Answer 4

删除你的版块样式高度：5371.2px;

<section id="home" class="home-section home-parallax home-fade bg-dark-30" data-background="" style="background-position: 20px 8px, 11px 6px, 5px 3px;">

在小型设备中查看时轮播滑块显示额外 space

carousel slider showing extra space when viewed in small devices

css

twitter-bootstrap

device