0

画面の全幅を占める背景画像を使用して、レスポンシブフォームを 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;
}
4

1 に答える 1

-1

フォームタグを閉じていないからでしょうか？

<div class="background-image-div">
    <div class="centerer-div">
        <form id="form">
           "some form stuff"
        </form>
    </div>
</div>
于 2016-04-01T10:26:11.237 に答える