CSS实现宽高比例自适应

响应式开发在前端越来越重要，一个网址能适应各种屏幕大小进行适配，对用户的浏览体验可以带来舒适的体验，本文介绍如何使用 padding-top 来实现按比例进行自动响应浏览器的屏幕大小

利用padding-top

我们都知道 padding-top 的值可以是一个数字，或者百分比，当值为百分比，是相对于 relative 的最近父元素来计算高度，可以利用这个特性来实现一个随着宽度自适应的正方形，当然也可以实现按比例自适应的矩形

<style>
.container {
  width: 20%;
}

.child {
  padding-top: 100%;
  background-color: #afafaf;
}
</style>

<div className="container">
  <div className="child">
  </div>
</div>

实现效果如下