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

问题描述

问 题

看完css中如何做到容器按比例缩放（烦请移步看看这篇文章）一文后，亲测确实可实现。但有一问题搞不明白：一般来说，width和height的值如果设置成百分数，那么它是按照父元素的宽度和高度来计算的，这里.wrap 的height=0，那.video中的height不也应该为0吗？但实测却不为0，是因为position的原因吗？为什么？谢谢解答！

解决方案

因为例子中wrap的实际高度是height + padding-bottom

题主写个demo试一下就很明显了~

---

题主你可以看下这里height文档说到：

<percentage> 相对于元素的块容器高度

这里说，百分比是相对于块容器高度的，并没有说相对于块容器height值的，对吧？那么在这里块容器高度是什么呢，就是父元素的height + padding-bottom

这篇关于css中如何做到容器按比例缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！