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

Posted 2020-10-26 微笑^

html 结构

<div class=‘detail‘>
  <div class="person-pic-wrap">
     <img :src=‘studentDetailDto.headPhoto‘>
  </div>
</div>

detail 弹性盒子，宽度100%

person-pic-wrap 30%宽度

img宽度高度100%

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

.person-pic-wrap{
  width: 30%;
  /*position: relative;*/
}

.person-pic-wrap:after{
  content: ‘‘;
  display: block;
  margin-top: 100%;
}

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

 position: absolute;

}