html - div 高度与具有最小高度的背景图像相同

Question

我正在尝试将响应式表单放入带有背景图像的 div 中，该背景图像将整个宽度从屏幕上移开。在搜索了一段时间之后，使背景图像 div 成为图像的完整大小的最佳选择似乎是使用图像大小的 padding-bottom。现在的问题是，当我在较小的屏幕上观看它时，背景图像 div 太小以适应表单的内容。我尝试使用 min-width:100% 但这没有帮助。

html:

<div class="background-image-div">
    <div class="centerer-div">
        <form id="form">
           "some form stuff"
        </form>
    </div>
</div>

CSS：

.background-image-div{
    background-image: url(background.png)
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    width: 100%;
    background-size: contain;
    position: relative;
    padding-bottom: 25%;
}
.centerer-div{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: auto;
    display: table;
    width: 100%;
}
#form{
    text-align: center;
}

Answer 1

也许是因为你没有关闭表单标签？

<div class="background-image-div">
    <div class="centerer-div">
        <form id="form">
           "some form stuff"
        </form>
    </div>
</div>