1. <div class="constant-width-to-height-ratio"></div>
    1. .constant-width-to-height-ratio {
    2.   background: #333;
    3.   width: 50%;
    4. }
    5. .constant-width-to-height-ratio::before {
    6.   content: '';
    7.   padding-top: 100%;
    8.   float: left;
    9. }
    10. .constant-width-to-height-ratio::after {
    11.   content: '';
    12.   display: block;
    13.   clear: both;
    14. }

    padding-top在…上::before伪元素使元素的高度等于其宽度的百分比。100%因此表示元素的高度始终为100%的宽度，创建一个响应正方形。
    此方法还允许内容正常放置在元素内部。