让一个元素高度随宽度按比例自适应

发表于 分类于 Waline： 阅读次数： 本文字数： 203 阅读时长 ≈ 1 分钟

记录

宽度的自适应是根据 Viewport 的 width 来调整的，高度的自适应也根据 Viewport 的 height 来调整的，理论上和 width 没有任何关系。所以需要找到一个可以关联上 Viewport 的 with 的属性还能撑起高度。

这个属性就是 padding，padding 是根据 Viewport 的 width 来调整的，padding-top 和 padding-bottom 也是如此，所以我们设置这个属性就可以和 width 保持一定比例了。

现在比如

父容器样式为

1
2
3
4
5
.father {
  width: 200px;
  height: 300px;
  background: #dedede;
}

子容器样式为

1
2
3
4
.child {
  width: 80%;
  background: #666;
}

这时候我们再设置

1
2
3
4
5
6
.child {
  width: 80%;
  height: 0;
  padding-bottom: 80%;
  background: #666;
}

子元素就变成了一个宽度 80%，高度为 0，但有 80% 宽度 的 padding-bottom 的正方形了，效果如下图