1. 使用CSS3的 vw单位
div {
width: 30%;
height: 30vw;
background: red;
}
vw
--- 1vw 等于viewport宽度的 1%
vh
--- 1vh 等于viewport高度的 1%
vmin
--- vw 和 vh 中的较小值
vmax
--- vw 和 vh 中的较大值
假设div标签的父元素宽度是浏览器可视区域(viewport)的宽度, 那width: 30% == 30vw, 就可以达到正方形的效果。
2. 利用padding-bottom
div{
width: 100%;
height: 0;
padding-bottom: 100%;
}
3. 效果图
转载请说明出处:
Simon的PHP技术博客
»
css 实现正方形的方式
评论