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

本文章只讲语法

html 结构

给大家说一下核心思路，大家就明白了 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 使用伪类

     
  
      
    
           
       
随着消费水平的提升，居民消费结构显著升级，健康消费也成为新的热点，作为人们日常生活的重要构成，健康人居备受关注，同时，其相关产业也呈现出显著的健康化趋势。
  
      
     

技巧十分简单。