看完css中如何做到容器按比例缩放（烦请移步看看这篇文章）一文后，亲测确实可实现。但有一问题搞不明白：一般来说，width和height的值如果设置成百分数，那么它是按照父元素的宽度和高度来计算的，这里.wrap 的height=0，那.video中的height不也应该为0吗？但实测却不为0，是因为position的原因吗？为什么？谢谢解答！
因为例子中wrap的实际高度是height + padding-bottom
题主写个demo试一下就很明显了~
题主你可以看下这里height文档说到：
<percentage> 相对于元素的块容器高度
这里说，百分比是相对于块容器高度的，并没有说相对于块容器height值的，对吧？那么在这里块容器高度是什么呢，就是父元素的height + padding-bottom
问题在position：absolute上。一般情况下，即position值不为absolute时，包含块是由内容边界构成；在这里，即position值为absolute时，包含块是由内边距边界构成。那高度自然不一样了，谢谢！话说，其实内容根本没有撑开，只是通过定位把要显示的内容浮动到内边距上面了，是不是？
设置了padding-bottom把高度撑开了，所以height不为0
因为他在这个元素上用了padding撑开了高度。一般让容器按比例缩放（类似img那种）的方法就是用padding-top或者padding-bottom设置一个百分比把容器撑开，然后容器的宽度变化就会按比例高度也变了。padding-top：100%的数值为宽度的数值。一个容器添加backgroundimage并且用了这种撑开方法就会和img标签一样具备按比例缩放的功能