使用 padding-bottom 设置高度基于宽度的自适应

我们在做移动端列表，通常会做到图文列表，列表是自适应的。当列表中有图片，图片的宽度是随着列表宽的变化而变化，我们为了在图片宽度变化的时候做到图片的不变形，所有采用以下办法。

本文章只讲语法

html 结构

<div class='detail'>
  <div class="person-pic-wrap">
     <img :src='studentDetailDto.headPhoto'>
  </div>
　<div class="person-list>
　　<ul>文字</ul>
</div>
</div>

给大家说一下核心思路，大家就明白了
detail 父级弹性盒子，宽度100%
person-pic-wrap 图片容器 30%宽度
img宽度高度100%
padding-bottom 值和宽度一致， 就生成一个宽高1比1的容器

css代码
方法1

.detail{
   100%;
  height:120px;
  position: absolute;
  display: flex;
  justify-content: space-around;
  bottom: 0;
  background: darkgoldenrod;
}

.person-pic-wrap{
   30%;
  padding-bottom: 30%;
}

.person-pic-wrap>img{
   100%;
}

方法2 使用伪类

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
       100%;
      height: 100%;
      max-height: 100%;
      max- 100%;
    }

    .box {
       100%;
      display: flex;
      background: blue;
    }

    .content {
       30%;
      position: relative;
    }

    .content:after {
      content: '';
      display: block;
      padding-bottom: 30%;
    }

    .text {
       100%;
      height: 100%;
      position: absolute;
      top: 0;
      color: white;
      padding: 20px;
      box-sizing: border-box;
      border: 1px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
<div class="box">
  <div class="content">
    <img src="https://goss.veer.com/creative/vcg/veer/612/veer-146053959.jpg">
    <p class="text">随着消费水平的提升，居民消费结构显著升级，健康消费也成为新的热点，作为人们日常生活的重要构成，健康人居备受关注，同时，其相关产业也呈现出显著的健康化趋势。</p>
  </div>
</div>
</body>
</html>

技巧十分简单。