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;   
       }