div {
width: 20%;
height: 0; // 设置高为0,让padding撑起高
padding-bottom: 20%; /* 让div的高等于宽 */
border-radius: 50%;
}
此时将padding-top/padding-bottom设置为百分比时,是基于父元素宽度,正好和width相等;在使用border-radius=50%,就实现了自适应的圆形。
div {
width: 20%;
height: 0; // 设置高为0,让padding撑起高
padding-bottom: 20%; /* 让div的高等于宽 */
border-radius: 50%;
}
此时将padding-top/padding-bottom设置为百分比时,是基于父元素宽度,正好和width相等;在使用border-radius=50%,就实现了自适应的圆形。