css中如何做到容器按比例缩放

这次主要讨论应用padding属性实现容器的高度根据容器的宽度按比例缩放。

padding：

css padding属性定义元素的内边距，padding属性接受长度值或百分比值，但不允许使用负值

前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的width计算的，这一点与外边距一样。所以，如果父元素的width改变，它们也会改变

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

适用场景：适配视频的高度。

核心思想为：提供一个容器，设置容器的高度为0，再设置padding-bottom为56.25%（按照视频比例算出padding-bottom的值，这里因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例），最后设置视频绝对定位，其宽高为容器的100%