css让元素的高度随着宽度变化而变化的正方形

发表于 更新于 分类于 阅读次数：

css样式

1
2
3
4
5
div {
    width：100%;     /*必须是100%*/ 
    height:0;
    padding-top:100%  /*padding-bottom:100% 也行*/ 
}

这样会使元素的高度等于宽度，形成一个正方形。

注意：

  • width必须为100%，不能为具体值;
  • 父元素的宽度必须有具体指,如：width:100px

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
   #wrapper {
     width: 100px
   }

   #wrapper #app {
     width: 100%;
     height: 0;
     padding-top: 100%;
     background: red;
   }
 </style>

 /* html代码 */
   <div id="wrapper">
   <div id="app"></div>
   </div>

运行效果: