html - 我想删除出现在响应式横幅图片中的空白区域

Question

我有一个包含背景图像的横幅，我希望它能够响应并在任何设备上显示相同，这就是为什么我设置了 background-size = 100% ，但问题是顶部的空白和我想删除背景图片的底部，但没有成功。我在与此相关的其他一些问题中尝试了很多命题，但它没有用。我是 CSS 的初学者，有人可以帮助我找到解决此类问题的完美方法吗？

在下面，您会找到我的横幅代码和 2 张解释我所拥有内容的图片。

这是横幅的 html 代码:

<div class="bannercontainer">
    <div class="banner" data-fullscreen="on" data-auto="true" data-hidetimerbar="off" data-fullscreenoffsetcontainer=".header">
        <ul>
            <li data-transition="fade" data-slotamount="7" data-saveperformance="on" class="background" style="background-image: url(images/slider/test.png); background-size: 100%">
                <div class="tp-caption sft large_bold_white"  data-x="left" data-y="center" data-hoffset="500" data-voffset="-85" data-speed="700" data-start="700" data-easing="easeOutBack">Welcome</div>
                <p class="tp-caption fade" data-x="left" data-y="center" data-hoffset="500" data-speed="500" data-start="900" data-easing="easeOutBack"></p>
                <a href="#slide-under" class="tp-caption sfb btn btn-primary btn-lg btn-wide slider-scroll" data-x="left" data-y="center" data-voffset="80"  data-hoffset="500" data-speed="300" data-start="1000">Read More</a>
            </li>
        </ul>
    </div>
</div>

第一张图片显示了完美契合的背景图片 https://imgur.com/a/Koqvh0t

但在移动设备中，我只想删除空格 https://imgur.com/a/THMHj0P并保持这样的背景图像。

非常感谢您的帮助。

Answer 1

如果您只是将高度设置为 100% 而不是整个图像会怎么样:

height: 100%;

或者您可以将背景设置为红色，使其看起来不像空白区域:

background-color: red;