HTML、CSS、画像応答ウェブサイト

Question

ねえ、私は応答ウェブサイトを作るしようとしていると、背景の変更は画像がボトムと変更外れサイズとして、私は、画面のサイズを変更頂点の位置。ヘルプをいただければ幸いです。

<div class="imagess"> 
    <img style="margin-left: 400px; margin-top: -103px; " src="images/Phone.png"/> 
</div> 
.imagess { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
} 

Answer 1

あなたは以下のように要素のトップ位置を設定するためにcss calc()機能を利用することができます。

.imagess { 
 
    position: relative; 
 
    width: 100%; 
 
    height:800px; 
 
    overflow:hidden; 
 
    background:#111; 
 
} 
 
.imagess > img{ 
 
    position:absolute; 
 
    width:200px; 
 
    height:300px; 
 
    right:0; 
 
    top:calc(100% - 90%); 
 
}

<div class="imagess"> 
 
    <img src="https://source.unsplash.com/random"> 
 
</div>

Answer 2

imgタグ用のクラスを作成します。これはimg-responsiveを行うCSSです。そして、私はちょうどあなたの構造について混乱させました。画像のマージン - 左とマージン - トップは私を混乱させました。これは単なる例です。

.imagess { 
 
    position: relative; 
 
    width: 100%; /* for IE 6 */ 
 
} 
 

 
.img-responsive{ 
 
width:100%; 
 
height:auto; 
 
display:block; 
 
margin:0 auto; 
 
}

<div class="imagess"> 
 
    <img class="img-responsive" src="https://repairexpress.com/wp-content/uploads/2014/02/repair-express-vernon-samsung-galaxy-note-4.png"/> 
 
</div>