1.利用vw、vh、vmin、vmax，vw表示的是viewport的宽度，也就是视口的宽度，vh表示的是视口的高度，vmin=min{vw,vh}取的是两者中较小的值，vmax ={vw,vh}，1vm = 1% viewport width其他同理，所以利用上诉的单位来定义矩形的宽高即可实现等比变换。
1 div{2 ?width :1vm;3 ?height:1vm;4 }2.利用垂直方向上的padding值，当容器中的内容超过了容器的宽高时，容器的内容会扩充到padding中，同时padding，margin如果设置为百分比，则均是相对于父级元素的宽度而言的，所以即可以使用如下方式宽高1:1，同理可以设置其他的比例，在这里需要注意一下，如果不写hegith的话，正方形内文字会溢出，溢出的高度正好就是文字所占空间的高度。 如果将padding-bottom换成padding-top，在正方形中有内容的时候，内容会在正方形外面，这是因为默认文字是从左到右，从上到下的排列所以paddin-top以后文字会在正方形外面
1 div{2 ??height:0px;3 ??width:100%;4 ??padding-bottom/top:100%;5 }3.利用双层嵌套来写，将外层的div的position设置relative，内层的position设置为absoult，利用绝对定位消除空间占用 ，分别看设置成padding-top／padding-bottom的效果
1 <div class="square3"> 2 ????<div class="con"> 3 ????????内容 4 ????</div> 5 </div> ?6 <div class="square3-2"> 7 ????<div class="con"> 8 ????????内容 9 ????</div>10 </div> 11 <style>12 .square3{13 ????padding-bottom:100%;14 ????height: 0;15 ????background:#ccc;16 ????width: 50%;17 ????position: relative;18 } 19 .square3-2{20 ????padding-top:100%;21 ????height: 0;22 ????background:#ccc;23 ????width: 50%;24 ????position: relative;25 } ?26 .con{27 ????position: absolute;28 ????width: 100%;29 ????height: 100%; 30 } 31 </style>运行之后我们发现写padding-top还是不可以，我们来检查代码发现，在写内层的div时候没有给top，left的值，让我们把top，left加上再看看
1 <style>2 .con{3 ????position: absolute;4 ????width: 100%;5 ????height: 100%; 6 ????top:0;7 ????left:0; 8 }9 </style>4.利用子元素将父元素撑起来，利用margin-top，但是要注意margin塌陷的问题
父元素：
1 .container{2 ??overflow:hidden;//触发BFC解决margin问题3 ??width:100%;4 }5 .container:after{6 ??content:"";7 ??margin-top:100%;8 ??display:block; //块级元素才可以有垂直方向上的margin9 }CSS实现自适应正方形、等宽高比矩形
原文地址：https://www.cnblogs.com/zlv2snote/p/10421514.html