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

前言

我们在进行移动端开发时，经常会遇到这样一个场景，在一个商品的详情页面，最顶端会放置一个大图，这个图片的宽度是自适应的，但怎么让高度也随着屏幕宽度的变化等比缩放呢?

解决方案

• 将其高度设置为0，使用padding-top：100%来将容器的高度变成和其宽度相等。
• 据w3c标准若将padding设置成百分比，则规定是基于父元素的宽度的百分比的内边距。

代码实现

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

效果图