常见处理方法如下：
1. 元素是img或video
首先了解下可替换元素的概念：
在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如
<iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。
替换元素根据其标签和属性来决定元素的具体显示内容，常见有img、input、textarea、select等。
说回来，img或vide等可替换元素，可以通过设置固定宽或高，另外的值可通过设置auto来进行自动计算。
.container{
width: 207px;
height: auto
}
2、普通元素实现固定宽高比
这种就是我们刷题经常看见的通过使用padding来实现的hack方法啦。不过该方式只能让高度随着宽度动，并不能实现宽度随着高度动。代为可用百分比也可用vw
.container{
float: left;
width: 50%;
height: 0;
padding-bottom: 50%
}
如上代码，我们将.container元素的高度设为了0，通过padding-bottom来撑开盒子的高度，实现了1:1的固定宽高比。
3. aspect-ratio属性指定元素宽高比
以上各种各种实现方案都不是也别完美，W3C CSS 工作组已经在致力于实现这样一个属性aspect-ratio。该方案已经提出，但是还处于设计阶段，草案。
