html - 具有响应背景的 Div 内的响应形式

Question

我正在尝试使用 Bootstrap 将文本输入和按钮添加到具有响应式背景图像的 div。我可以很容易地让每个人自己做出回应，而不是在一起。

我相信这是由于我给他们的职位。我正在寻找一种方法，无论屏幕尺寸如何，它们都能一起缩放。

CSS:

 <style>
            #optin-bg{
                max-width: 799px;
                min-height: 310px;
                height: auto;
                background-image: url(http://placehold.it/799x310.png);
                background-repeat: no-repeat;
                background-size:contain;
                background-position:center;
                overflow: hidden;
            }

            #optin-form{
                position:absolute;
                top: 50%;
                left: 10%;
            }

            #email-input{
                margin-bottom:10px;
            }
        </style>

HTML:

  <div class="container-fluid">
          <div class="col-md-6 col-md-offset-2" id="optin-bg">
              <div class="col-md-4 col-md-offset-3" id="optin-form">
                <input type="email" class="form-control" id="email-input" placeholder="Email">
                <button type="submit" class="form-control" id="email-submit" >Submit</button>
              </div>
          </div>
    </div><!-- /.container -->

http://jsfiddle.net/f07y6xkx/

Answer 1

我能够通过多个媒体查询和重置表单的大小/位置来解决这个问题。简单，有点乱，修复。

例如:

    @media(min-width: 768px){
        #optin-bg {
            background: url("optin_image_2.png") no-repeat scroll 0 0/100% auto rgba(0, 0, 0, 0);
            min-height: 310px;
            max-width: 550px;
        }
        #optin-form{
            width: 40%;
            top: 120px;
            left: 5px;
        }
    }
    @media(min-width: 992px){
        #optin-bg {
            min-height: 310px;
            max-width: 699px;
        }
        #optin-form{
            width: 30%;
            top: 150px;
            left: 10px;
        }
    }

    @media(min-width: 1200px){
        #optin-bg {
            min-height: 310px;
            max-width: 799px;
        }
        #optin-form{
            top: 175px;
            left: 10px;
        }

    }