使用 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{
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>
技巧十分简单。
