css - 无法为 div 自动调整大小制作背景图像

Question

我已经为此苦苦挣扎了几个小时，但没有取得任何进展。以为我会来这里寻求帮助。我的任务很简单也很常见。使用 BS3，我试图让一个完整的页面容器有一个背景图像，当你调整浏览器大小时它会调整大小。看起来很简单，但我在这里找到的几个解决方案根本行不通。这是我所在的位置:

<section id="LandingRow">
<div class="LandingRowWrapper">
    <div class="container-fluid">
        <div class="row">

            <%--Visible in small, med, large devices.--%>
            <div class="col-sm-6 col-sm-offset-6 hidden-xs">
                <div class="row">
                ...content...
                </div>

                <div class="row">
                ...content...
                </div>
            </div>


            <%--Visible in xs devices only.--%>
            <div class="col-sm-12 visible-xs">
            ...content...
             </div>
        </div>
    </div>
</div>

...还有我的 CSS...

.LandingRowWrapper 
{
    border-width: 1px; 
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: #bbd8e7;
    background-color: #ffffff;
    background-image: url('../images/slider3.jpg');
}

非常感谢!!

Answer 1

如果你想让背景覆盖容器的高度和宽度，我会使用background-size: cover;。如果您希望它只是水平缩放并保持高度成比例，background-size: 100;% 应该可以解决问题。