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;%应该可以做到。

无法为div自动调整大小的背景图像

1 个答案: