首页 > 其他 > 详细

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

时间:2018-03-06 14:27:19      阅读:385      评论:0      收藏:0      [点我收藏+]

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;
}





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

原文:https://www.cnblogs.com/yangmengsheng/p/8514005.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!