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

Question

我有一个旋转木马滑块，适用于大屏幕。但是当在小型设备中查看相同内容时，会添加额外的灰色背景空间。在SITE LINK的firefox中可以在（ctrl + shift + m）中查看相同内容。在萤火虫中查看时，我注意到它可能是由于

element.style {
    height:345.6px
}

如果我移除高度，它可以完美地工作。如何解决这个问题？

更新：如果未显示滑块，请选择将城市更改为古瓦哈提

Answer 1

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

编辑： 确实，这应该是一个评论。对于那个很抱歉。为元素指定一个特定的类并覆盖模板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中，为父background添加与.item相同的图片。并使用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;">