移动端的大图高度怎么让他随着屏幕大小自适应？

如下图：

代码如下：

<div class="img-header">
  <img src="">
</div>

<style lang="scss" scoped>
.img-header{
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 100%;
      img{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
      }
  }
</style>
//将其高度设置为0，使用padding-top：100%来将容器的高度变成和其宽度相等。
//据w3c标准若将padding设置成百分比，则规定是基于父元素的宽度的百分比的内边距。

复制代码

转载于:https://juejin.im/post/5acc26f46fb9a028b92d7530