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

Question

我正在尝试将一个响应式表单放入一个 div 中，该表单的背景图像占满了屏幕的整个宽度。搜索了一段时间后，似乎使背景图像 div 成为图像的完整大小的最佳选择是使用图像大小的填充底部。 现在的问题是，当我在较小的屏幕上观看它时，背景图像 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>