等寬高，這需求蠻常出現的，來做個筆記。 (https://jsfiddle.net/3q2f5ua0/3/\)

<div class='box'> 
  <div class='content'>Aspect ratio of 1:1</div> 
</div>

<style>
  .box{
    position: relative;
    width: 50%;   /* desired width */
  }
  .box:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
  }

  .content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: orange;
  }
</style>

• HEIGHT EQUALS WIDTH WITH PURE CSS