CSS 设置动态高度, 等比例缩放宽度 (超实用)

如何通过 CSS 实现高度 height 随着宽度 width 变化而变化, 保持长宽比例不变, 且宽度是根据父元素宽度变化的

使用 :before 伪元素, 能获取到实际高度 (推荐)

html:

<div class="content">
</div>

css:

.content{
  background: #ff0000;
  width: 100%;
}

.content:before {
  content: '';
  display: inline-block;
  padding-bottom: 100%;
  width: 0.1px;
  vertical-align: middle;
}