转载自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的值与对应所形成容器的比例关系为容器宽除以高
以下是常用比例与对应百分比值: