.figure{
position: relative;
width: 100%;
height: 0;
overflow: hidden;
margin: 0;
padding-bottom: 100%; /* 关键就在这里 */
}
查看W3C上padding的属性
% 规定基于父元素的宽度的百分比的内边距。
.figure{
position: relative;
width: 100%;
height: 0;
overflow: hidden;
margin: 0;
padding-bottom: 100%; /* 关键就在这里 */
}
查看W3C上padding的属性
% 规定基于父元素的宽度的百分比的内边距。
本文标题:css 自适应百分比正方形
本文链接:https://www.haomeiwen.com/subject/kbfzdttx.html
网友评论