qzm
3/2/2017 - 9:31 AM

自适应正方形

自适应正方形

/* 方法一:1个vw 单位,代表1%视窗单位,相对的还有 hv ,代表一个视窗高度 */
.square {
  width : 25%;
  height : 25vw;
}

/* 方法二:height 为0,使用padding撑开高度,padding的百分比根据所在block的宽度来计算的 */
.square {
  width : 25%;
  height : 0;
  padding : 12.5% 0;
}