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;
        }

    }

响应形式内部Div与响应背景

1 个答案: