复用 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. 静态链表-C语言实现

    1.静态链表是在没有指针的编程语言里对链表的一种实现2.主要是用数组模拟指针3.在这里,使用结构体使数组的每一个空间可以存储一个数据元素(date)和一个游标(cur),游标的作用相当于链表的指针域, ...

  2. 动态规划--最长上升子序列(LIS)的长度

    l例如:对于[3,1,4,2,5],最长上升子序列的长度是3 arr = [3,1,4,5,9,2,6,5,0] def lis(arr): #dp[i]表示第i个位置的值为尾的数组的最长递增子序列的 ...

  3. Blazor 版 Bootstrap Admin 通用后台权限管理框架

    前言 上一篇介绍过了前后台分离的 NET Core 通用权限管理系统 在这篇文章简要的介绍了 Bootstrap Admin 后台管理框架的一些功能.本篇文章带来的是微软最新出的 Blazor 版本的 ...

  4. 使用Fiddler 对ios 设备进行HTTPS 的抓取

    http://blog.csdn.net/skylin19840101/article/details/43485911  使用Fiddler 对ios 设备进行HTTPS 的抓取

  5. iOS 日志获取和实时浏览器显示日志

    https://juejin.im/entry/576252855bbb500063e51c7d iOS 日志获取和实时浏览器显示日志

  6. MyBatis框架的基本配置

    MyBatis的基本配置文件: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE config ...

  7. windows上安装和使用ab压测工具

    ApacheBench是一款压力测试工具,用于测试http服务器请求的性能情况. 官方下载链接:https://www.apachehaus.com/cgi-bin/download.plx 百度云: ...

  8. tensorflow word2vec详解

    maybe_download 下载text8.zip.可以手工下载下来.然后指定text8.zip的路径. read_data 解压text8.zip,把数据读入到data中. data是一个长数组, ...

  9. USB工业摄像头设计之上位机

    在工业相机中对摄像头要求较高,且采集的图像数据要求是源数据,未经过任何处理. 为了兼容xp.win7(32bit 64bit) 程序采用VS2008  MFC编制,参考网上一些应用. CYUSB驱动与 ...

  10. 视频发布 2019 中国.NET 开发者峰会

    2019 年,注定会是 .NET Core 社区发展的关键一年,诸多重大事件在这一年发生!正如大家所期待的那样,刷新中国 .NET 社区的年度盛会--2019 中国 .NET 开发者峰会(.NET C ...