响应式布局调整浏览器窗口的大小保证宽高比不变

1.padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。100% 因此表示元素的高度始终为100% 的宽度，创建一个响应正方形。​​​​​​​

<div class="kgb"></div>
<style>
.kgb {
  background: #333;
  width: 50%;
}
.kgb::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.kgb::after {
  content: '';
  display: block;
  clear: both;
}
</style>

2.

<div class = "kgb"></div>   
<style>
.kgb {
    width: 20%; height: 0;
    padding-top: 20%;
    background: black;
}
</style>