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

栏目: CSS · 发布时间: 6年前

内容简介:复用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>

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

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%

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Go程序设计语言

Go程序设计语言

艾伦 A. A. 多诺万 / 李道兵、高博、庞向才、金鑫鑫、林齐斌 / 机械工业出版社 / 2017-5 / 79

本书由《C程序设计语言》的作者Kernighan和谷歌公司Go团队主管Alan Donovan联袂撰写,是学习Go语言程序设计的指南。本书共13章,主要内容包括:Go的基础知识、基本结构、基本数据类型、复合数据类型、函数、方法、接口、goroutine、通道、共享变量的并发性、包、go工具、测试、反射等。 本书适合作为计算机相关专业的教材,也可供Go语言爱好者阅读。一起来看看 《Go程序设计语言》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具