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

Posted wayou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 利用 `padding-bottom` 实现固定比例的容器相关的知识,希望对你有一定的参考价值。

复用 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%

相关资源

以上是关于CSS 利用 `padding-bottom` 实现固定比例的容器的主要内容,如果未能解决你的问题,请参考以下文章

css里的属性padding-bottom,在用js控制的时候应该怎么写?

CSS布局奇淫技巧之-多列等高

微信小程序:css:安全区和状态栏的计算和适配

微信小程序:css:安全区和状态栏的计算和适配

利用padding——实现高度可控的分隔线

响应式设计:为啥高度为零和 padding-bottom 可以使 div 响应大小?