我們在做移動端列表，通常會做到圖文列表，列表是自適應的。當列表中有圖片，圖片的寬度是隨着列表寬的變化而變化，我們為了在圖片寬度變化的時候做到圖片的不變形，所有采用以下辦法。
本文章只講語法
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>
技巧十分簡單。