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

为img标签创建一个类。这是制作img-responsive的css。而我只是对你的结构感到困惑.Coz图像样式margin-left和margin-top使我困惑。所以这只是一个例子。

.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>

Answer 2

You could make use of css calc() function to set top positioning of element as below.

.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>