css自适应正方形的方案

1. 经过搜索查找，总结几种常用的css自适应的正方形的解决方案： html代码：

       <div style="width:100px;">
      <div class="z"><!-- 此处有无内容亦会影响 --></div>
       </div>     

   以下为几种解决方案：

   1. 利用padding-bottom:100%撑开，如果无内容可不设置height:0;这一项，如果有内容的情况下还想保持为正方形，则需要设置height:0;

       .z{
           width: 100%;
           padding-bottom: 100%;
           border: 1px solid red;
           height: 0;   
        } 

   1. 利用after伪类,先存在问题是，如果加入内容则高度会被撑开，而设置height:0并不能解决这一问题，有待研究，如果大家有好的方案，可以留言

   .z {
       width: 100%;
       border: 1px solid red;   }
        .z:after {
       content: '';
       display: block;
       margin-top: 100%;   
   }
   

   1. 利用padding:50% 0;原理和padding-bottom:100%大致相似，但是此处如果有内容则是从div的一半处开始。

         .z {
           width: 100%;
           padding: 50% 0;
           border: 1px solid red;
           height: 0;
         } 
   

   1. 网上搜罗的一个方法，利用vm,代码如下，不过本人木有实现成功，欢迎大家留言已实现成功的demo。并且这个方法兼容性目前来说还较差。所以放在最后一个，不太推荐，不过还是很好奇，这个东西是怎么实现的。

       .z {
           width: 100%;
           height: 100vm;
           border: 1px solid red;   
       }