CSS如何实现固定宽高比

常见处理方法如下：

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。该方案已经提出，但是还处于设计阶段，草案。