css 自适应百分比正方形

.figure{
   position: relative;
   width: 100%;
   height: 0;
   overflow: hidden;
   margin: 0;
   padding-bottom: 100%; /* 关键就在这里 */
} 

查看W3C上padding的属性

% 规定基于父元素的宽度的百分比的内边距。