内容简介：复用16:9 容器的效果
复用 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;">
this content will have a constant aspect ratio that varies based on the width.
</div>
</div>
16:9 容器的效果
其中 padding-bottom 的值与对应所形成容器的比例关系为容器宽除以高。
The percentage is calculated with respect to the width of the generated box's containing block
-- 来自 w3.org 的描述
以下是常用比例与对应的百分比值：
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
