CSS 实现高度是宽度的一半

[ryancui92]

padding 属性 MDN 和 规范：

Percentages - refer to the width of the containing block

当使用百分比值时，通过包含块的宽度计算。由此可以通过设置 padding-top: 50%; 来实现高度恒为宽度的 50% 效果。

注意的是，这种实现方式其实是把 padding 撑开，实际上 box 并没有高度。因此当需要在 box 内部再进行布局时，需要放到外面。

CodePen