父级设置宽为任意,高设置为0,设置padding-top:width。由于父级使用的padding撑开的内容区域,所以不能操作内容区域,顾子集不设置宽高,使用position:absolute(绝对定位)top、right、bottom、left为零。
<div class="song-img"> //父级
<div class="img-box"> //子级 (也是内容区域)
<img src="../../source/song_1.jpg" alt="">
</div>
</div>
.song-img {
width : 70%;
height : 0px;
margin : 0 auto;
padding-top: 70%;
position : relative;
.img-box {
position : absolute;
top : 0px;
right : 0px;
bottom : 0px;
left : 0px;
border-radius : 50%;
background-color: #000;
display : flex;
justify-content : center;
align-items : center;
img {
width : 75%;
height : 75%;
border-radius: 50%;
}
}
}