正方形

<div className="constant-width-to-height-ratio"></div>

.constant-width-to-height-ratio {
    background: #333;
    width: 20%;
  }

  .constant-width-to-height-ratio::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.constant-width-to-height-ratio::after {
  content: '';
  display: block;
  clear: both;
}

参数 padding-top在before的伪元素上，导致高度始终等于宽度，100%是表示百分之百的相等.