Question

我有一个横幅，其中包含我想响应的背景图像，并且在任何设备上都显示相同，这就是为什么我将background-size = 100％设置为问题，但是问题是顶部和底部都有空白我想删除背景图片的底部，但没有成功。与之相关的其他一些问题，我已经尝试过很多命题，但这是行不通的。我是CSS的初学者，有人可以帮助我找到类似问题的完美解决方案吗？

亲爱的，您会找到我的横幅代码和两张解释我所拥有的图片。

这是横幅的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;

Answer 2

尝试以下CSS：

.bannercontainer .background{
    background-size: cover;
}

这将使图像填充任何空白区域，并在必要时修剪图像。

编辑：实际上看起来您已经在使用它。通过图像看起来像您调整子元素的大小，例如.banner，<ul>或<li>的高度不是100％。使用F12检查元素。将鼠标悬停在元素上以在页面上查看其大小。仅将图片环绕的图片可能需要设置为position: absolute; height: 100%; width: 100%; margin:0; padding: 0;

我想删除显示在自适应横幅图像中的空白

2 个答案: