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

技巧十分簡單。