靠近div的位置图像完美

Question

如何以各种屏幕尺寸完美地放置图像？

.background-login { 
 
    background: url(../img/login.png) no-repeat; 
 
    background-size: 100%; 
 
    z-index: -2; 
 
    position: absolute; 
 
    top: 8%; 
 
    min-height: 400px; 
 
    right: 2%; 
 
    height: 100%; 
 
} 
 

 
.background-login-create { 
 
    background: url(../img/login.png) no-repeat; 
 
    background-size: 100%; 
 
    z-index: -2; 
 
    position: absolute; 
 
    top: 17%; 
 
    min-height: 400px; 
 
    right: 2%; 
 
    height: 100%; 
 
} 
 

 
.background-login-create-profile { 
 
    background: url(../img/login.png) no-repeat; 
 
    background-size: 100%; 
 
    z-index: -2; 
 
    position: absolute; 
 
    top: 13%; 
 
    min-height: 400px; 
 
    right: 2%; 
 
    height: 100%; 
 
} 
 

 
.sellfie-start-text { 
 
    font-size: 15px; 
 
    padding: 145px; 
 
    text-align: center; 
 
    font-weight: 200; 
 
    position: relative; 
 
    top: 8%; 
 
    vertical-align: middle; 
 
    color: #FFF; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container div-login"> 
 
    <div class="row"> 
 
    <div class="col-sm-5 col-md-offset-1"> 
 
     <div class="center"> 
 
     <h2 class="login-title"></h2> 
 
     <h4></h4> 
 
     <p class=""></p> 
 
     </div> 
 
     <div class="account-wall"> 
 
     <p class="profile-name">Hello!<span style="color:red">:)</span></p> 
 
     <p class="profile-desc">We require only your mobile number for both login and signup</p> 
 
     <br> 
 
     <div class="form-signin"> 
 
      <div class="md-form"> 
 
      <input type="text" placeholder="Enter Mobile Number" value="" name="mobile_number" id="mobile_number" class="mobile_number form-control"> 
 
      </div> 
 
      <button class="btn btn-main btn-continue" id="continue"> 
 
      CONTINUE</button> 
 
      <div class="form-signin-bottom">By clicking on Continue, you agree to our <a href="">Privacy Policy</a> 
 
      & <a href="">Terms</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 background-login"> 
 
     <div class="sellfie-logo"> 
 
     <img src="img/sellfie_white.png"/> 
 
     </div>  
 
     <div class="sellfie-start-text"> 
 
     Sellfie is the easiest way to sell online and collect payments for your products & services on social networks 
 
     and online channels. 
 
     </div>  
 
    </div> 
 
    </div> 
 
</div>

如果左容器越大，我想我的右影像是相同的高度左容器是什么？

.background-login { 
    background: url(../img/login.png) no-repeat; 
    background-size: cover; 
    z-index: -2; 
    position: absolute; 
    margin-top: 50px; 
    right: 2%; 
    min-height:400px; 
    height: 100%; 

} 

Answer 1

我已经加入wrapperbackground-login元素和一些CSS里面，使其中心对齐。

在.background-login CSS，设置background-size: cover（这将使图像覆盖整个元素）

我也删除top和right价值观，不要引导栏设置的位置值，因为他们将打破布局。

body { 
 
    background-color: #ddd !important; 
 
} 
 

 
.form-left, 
 
.background-login { 
 
    height: 400px; 
 
} 
 

 
.form-left { 
 
    background-color: white; 
 
} 
 

 
.background-login { 
 
    position: relative; 
 
    background: url(https://unsplash.it/600/400) no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
} 
 

 
.background-login .wrapper { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    padding: 30px; 
 
    text-align: center; 
 
} 
 

 
.sellfie-start-text { 
 
    font-size: 15px; 
 
    text-align: center; 
 
    font-weight: 200; 
 
    position: relative; 
 
    top: 8%; 
 
    vertical-align: middle; 
 
    color: #FFF; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container div-login"> 
 
    <div class="row"> 
 
    <div class="col-sm-5 col-md-offset-1 form-left"> 
 
     <div class="center"> 
 
     <h2 class="login-title"></h2> 
 
     <h4></h4> 
 
     <p class=""></p> 
 
     </div> 
 
     <div class="account-wall"> 
 
     <p class="profile-name">Hello!<span style="color:red">:)</span></p> 
 
     <p class="profile-desc">We require only your mobile number for both login and signup</p> 
 
     <br> 
 
     <div class="form-signin"> 
 
      <div class="md-form"> 
 
      <input type="text" placeholder="Enter Mobile Number" value="" name="mobile_number" id="mobile_number" class="mobile_number form-control"> 
 
      </div> 
 
      <button class="btn btn-main btn-continue" id="continue"> 
 
      CONTINUE</button> 
 
      <div class="form-signin-bottom">By clicking on Continue, you agree to our <a href="">Privacy Policy</a> 
 
      & <a href="">Terms</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 background-login"> 
 
     <div class="wrapper"> 
 
     <div class="sellfie-logo"> 
 
      <img src="img/sellfie_white.png"/> 
 
     </div>  
 
     <div class="sellfie-start-text"> 
 
      Sellfie is the easiest way to sell online and collect payments for your products & services on social networks 
 
      and online channels. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

#details { 
    display: inline-block; 
    vertical-align:middle; 
    border:solid black 1px; 
    width: 300px; 
} 
.photo { 
    display: inline-block; 
    vertical-align:middle; 
    width: 300px; 
    height: 300px; 
    border: 1px solid #d1c7ac; 
}