【转载】CSS 利用 `padding-bottom` 实现固定比例的容器

转载自https://www.cnblogs.com/Wayou/p/css_keep_ratio_by_padding_bottom.html

 

学习总结：

复用 padding-bottom 可实现一块区域在窗口尺寸变化使始终保持自适应。对于响应式布局中的图片或视频来说比较有用。

<div style="width: 100%； position: relative; padding-bottom: 56.25%;">
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: yellow">
    </div>
</div>

 

 

 

 

 

 

 

 

 

padding-bottom的值与对应所形成容器的比例关系为容器宽除以高

以下是常用比例与对应百分比值：