1 | < div style = "width: 100%; position: relative; padding-bottom: 20%;" > |
2 | < div style = "position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;" > |
3 | this content will have a constant aspect ratio that varies based on the width. |
4 | </ div > |
5 | </ div > |
通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的,这在响应式页面设计中比较有用,能够保持元素不变形。