CSS之设置图片宽度100%，高度等于宽度

html代码如下：

<div class="left">
   <div class="img">
     <img src='static/img/face-2.jpg'>
   </div>
</div>

/*stulus语法*/
.img{
    position:relative;
    width:100%;
    height:0;
    padding-top: 100%; /*padding-bottom都可以*/
    img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

在CSS中，padding-top和padding-bottom这两个属性的百分号是根据元素的宽度计算的，所以设置为100%，元素.img的宽度和高度就一样了。
但子元素img要正确放置在div.img中，则需要将div.img设置为relative，然后将img设置为absolute，然后img定位为top:0,left:0，如果不设置定位，那么img会从div.img右下角开始显示，超出了div.img的范围，页面上显示不出来