复用 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. js的模糊查询

    在项目中会用到模糊查询,之前在首页是用的element的tree显示的目录,会有用到搜索,但tree里边会有自带的模糊查询,用filter-node-method方法使用 但上次的项目中 又涉及到不试 ...

  2. Flink应用程序结构开发介绍

    Flink程序遵循一定的编程模式.DataStream API 和 DataSet API 基本具有相同的程序结构.以下为一个流式程序的示例代码来对文本文件进行词频统计. package com.re ...

  3. SpringBoot-HelloWorld(三)

    HelloWorld 学一个新的框架,不写helloworld是没有灵魂的,嘿嘿 准备工作 我们将学习如何快速的创建一个Spring Boot应用,并且实现一个简单的Http请求处理.通过这个例子对S ...

  4. UITableView 相关方法

    最近闲来无事,总结一下 UITableViewDataSource和 UITableViewDelegate方法 UITableViewDataSource @required - (NSIntege ...

  5. ASE19团队项目beta阶段Backend组 scrum6 记录

    本次会议于12月12日,19:30在微软北京西二号楼sky garden召开,持续10分钟. 与会人员:Zhikai Chen, Lihao Ran, Xin Kang 请假人员:Hao Wang 每 ...

  6. GZIP怎么运用在.NET MVC 简单实现

    ZIP压缩其实就是将网页内容压缩,减少HTML代码网络传输的代价,来提高Web性能. 这个请求的过程解释一下: 1:客户端Request请求.Http_header中会根据相应的浏览器发送相应的编码规 ...

  7. [TimLinux] JavaScript 模态框可拖动功能实现——节流版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. java中List、Map、Set、Stack、Queue、Collections等的使用

    java中List.Map.Set.Stack.Queue.Collections等的使用 List 创建方法: List<String> list=new ArrayList<&g ...

  9. 洛谷 题解 P3385 【【模板】负环】

    一.声明 在下面的描述中,未说明的情况下,\(N\) 是顶点数,\(M\)是边数. 二.判负环算法盘点 想到判负环,我们会想到很多的判负环算法.例如: 1. Bellman-Ford 判负环 这个算法 ...

  10. DRF Django REST framework 之 路由器与版本控制组件（七）

    路由器 一些Web框架提供了用于自动确定应如何将应用程序的URL映射到处理传入请求的逻辑的功能. 而DRF的路由器组件也提供了一种简单,快速且一致的方式将视图逻辑映射到一组URL上. 路由器组件的使用 ...