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

咱们在作移动端列表，一般会作到图文列表，列表是自适应的。当列表中有图片，图片的宽度是随着列表宽的变化而变化，咱们为了在图片宽度变化的时候作到图片的不变形，全部采用如下办法。css

本文章只讲语法html

html 结构flex

<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{
  width: 100%;
  height:120px;
  position: absolute;
  display: flex;
  justify-content: space-around;
  bottom: 0;
  background: darkgoldenrod;
}

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

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

方法2 使用伪类

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

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

 .box { width: 100%; display: flex; background: blue; }  .content { width: 30%; position: relative; } .content:after { content: ''; display: block; padding-bottom: 30%; }

    .text {
      width: 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>

技巧十分简单。