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