在div上放置一個圖像，用它調整大小

Question

我有一個登錄頁面，其中包含用戶名和密碼的表單。有時我需要在登錄表單上放置一個圖像，並在較小的設備上使用所述登錄表單進行調整。 這裏的登錄表單今天

而且附帶的圖像（只是拿了一個，這不是我想象怎麼它:)）

我想，我需要一些JS找到表單框的當前位置和大小，然後相應地調整大小？

我不能僅僅手動調整它的原因是會有多個不同的登錄頁面，我需要使創建一個新的上下文變得非常容易。圖像的大小和位置將始終是相同的

<div class="valign-wrapper" style="width:100%;height:100%;position: absolute;"> 
<div class="valign" style="width:100%;"> 
<div class="container"> 
    <div class="row"> 
    <div class="col s12 m6 offset-m3"> 
     <div class="card hoverable"> 
     <div class="card-image"> 
      <div class="la-logo"></div> 
      <!--<span class="card-title">Login</span>--> 
     </div> 
     <div class="card-content"> 
      <!--<span class="card-title black-text">Sign In <i class="material-icons right">more_vert</i></span>--> 
      <form name="login" id="login" class="login" method="POST" action="j_security_check" target="_top"> 
      <div class="row"> 
       <div class="input-field col s12"> 
       <input placeholder="Username" autocapitalize="none" id="username" type="text" class="validate" name="j_username" /> 
       <!--<label for="firstname" class="active">First Name</label>--> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s12 "> 
       <input placeholder="Password" id="password" type="password" class="validate" name="j_password" /> 
       <!--<label for="lastname" class="active">Last Name</label>--> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="center-btn"> 
       <input type="submit" class="la-largebtn btn hide-on-med-and-down" value="Log In" /> 
       <input type="submit" class="btn hide-on-large-only" value="Log In" /> 
       </div> 
      </div> 
      </form> 
     </div> 
     <div class="card-action"> 

      <div class="center-btn la-hideable"> 
      <a class="la-register" href="#">Register</a> 
      <a class="la-forgot-password" href="#">Forgot Pasword</a> 
      </div> 
     </div> 

     </div> 
    </div> 
    </div> 
</div> 
</div> 
</div> 

Answer 1

你可以只定義圖像的尺寸相對於容器的大小（當圖像容器內），然後將它轉移出來的容器根據你的願望。例如：

<div> 
    <img src="http://placehold.it/350x150"> 
</div> 

div { 
    width: 400px; 
    height: 400px; 
    background: #ff0000; 
    position: relative; 
} 
div img { 
    position: absolute; 
    width: 50%; 
    right: -20%; 
    bottom: 0; 
} 

https://jsfiddle.net/pLrdtgsg/

Answer 2

您是否嘗試過使用「VH/VW」作爲圖像尺寸，使其分別基於屏幕高度或寬度進行自我更新。

例如：

img{ 
height: 10vh; 
width: 20vw; 
}