图片自适应屏幕宽度

实现效果: 图片自适应屏幕宽度显示,同时,在图片加载完成前也会有空白占位

HTML代码:

<div class="wrapper">
  <div class="image">
      <img src="/url">
  </div>
</div>

style:

.image{
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  padding-top: 100%; 
}

img{
  position:absolute;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
}

boom~