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