复用 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` 实现固定比例的容器的更多相关文章

  1. css利用padding百分比实现图片自适应高度

    应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...

  2. css利用padding生成图标

    先插入HTML结构: <div class="line-three"></div> <div class="circle"> ...

  3. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  4. 响应式网页中，如何只用CSS实现div的高和宽保持固定比例

    引言: 如果div里是<img>,原生就支持. .item img {     float: left;     margin:5%;     width: 20%; } >> ...

  5. 纯 CSS 利用 label + input 实现选项卡

    clip 属性 用于剪裁绝对定位元素. .class { position:absolute; clip:rect(0px,60px,200px,0px); } scroll-behavior: sm ...

  6. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  7. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  8. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  9. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

随机推荐

  1. Spring Boot和Feign中使用Java 8时间日期API（LocalDate等）的序列化问题【转】

    Spring Boot和Feign中使用Java 8时间日期API(LocalDate等)的序列化问题 http://blog.didispace.com/Spring-Boot-And-Feign- ...

  2. mybatis中因为不理解$与#而出现的bug

    最近项目中遇到一个bug,正常的流程是这样的:要上传一个应用,首先检查系统中是否已经存在这个应用的更高版本,如果存在,则上传操作将被取消. bug体现为当传入系统中存在的所有应用与新上传的应用的ver ...

  3. Thinkphp5——pathinfo的访问模式、路径访问模式

    tp5访问入口文件的时候是,访问public目录下的index.php,那么她真正访问的url到底是什么?如何去访问其他页面,实际上她默认使用的PATH_INFO模式进行访问. PATHINFO模式 ...

  4. Spring Cloud Hoxton正式发布，Spring Boot 2.2 不再孤单

    距离Spring Boot 2.2.0的发布已经有一个半月左右时间,由于与之匹配的Spring Cloud版本一直没有Release,所以在这期间碰到不少读者咨询的问题都是由于Spring Boot和 ...

  5. 挑战10个最难的Java面试题（附答案）【下】

    查看挑战10个最难的Java面试题(附答案)[上] 在本文中,我们将从初学者和高级别进行提问, 这对新手和具有多年 Java 开发经验的高级开发人员同样有益. 关于Java序列化的10个面试问题 大多 ...

  6. WebSSH画龙点睛之lrzsz上传下载文件

    本篇文章没有太多的源码,主要讲一下实现思路和技术原理 当使用Xshell或者SecureCRT终端工具时,我的所有文件传输工作都是通过lrzsz来完成的,主要是因为其简单方便,不需要额外打开sftp之 ...

  7. Hive Hadoop 解析 orc 文件

    解析 orc 格式 为 json 格式: ./hive --orcfiledump -d <hdfs-location-of-orc-file> 把解析的 json 写入 到文件 ./hi ...

  8. Win7 系统所有应用颜色调整

    不知道按到哪个快捷键了,发现windows7系统桌面,浏览器,PDF阅读器和Eclipse的北京和菜单都编程淡黄色,下面是解决的过程. 方法一:在win7桌面右击 -> 个性化 -> 窗口 ...

  9. LightOJ 1229 Tablecross

    Treblecross is a two player game where the goal is to get three X in a row on a one-dimensional boar ...

  10. CSUOJ2031-Barareh on Fire(双向BFS)

    Barareh on Fire Submit Page Description The Barareh village is on fire due to the attack of the virt ...