公司建设网站费用会计分录哈尔滨建筑工程招聘信息
目录
问题描述
方法一：padding处理
方法二：aspect-ratio
问题描述
最近面试遇到了这样一个【16:9区域问题】，思考一番决定记录下来，希望可以帮助到小伙伴们
问题：“如何用纯CSS实现一个16:9的固定区域？”
方法一：padding处理
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>html,body {margin: 0;padding: 0;}.parent-container {position: relative;width: 100%;height: 0;padding-bottom: 56.25%; /* 9/16比例 */}.content-container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: black;}</style>
</head><body><div class="parent-container"><div class="content-container"></div></div>
</body></html>效果：
- 在CSS中，所有“百分比形式的内边距”都是基于“父元素的宽度”来决定的
- 使用中，应当使用“content-box”(标准盒模型)，而不应该使用“border-box”(怪异盒模型)，尽管两者都可以完成16:9的任务，但是当父元素“parent-container”存在边框或左右内边距时，实际的width会被压缩，这就会导致实际效果并不是精确的16:9
- 该方法也是兼容性最好的方法，在任何浏览器中都可以使用
我们让box-sizing:content-box与box-sizing:border-box做一个比较，我们令宽度为1000px，对比高度即可发现区别
box-sizing:content-box：
在box-sizing:content-box模式下，宽度为1000px时，高度约为608.25px
box-sizing:border-box(未添加border)：
在未添加border时，高仍然约为608.25px
在box-sizing:content-box模式下，宽度为1000px时，高度约为608.25px
box-sizing:border-box(添加border:10px)：
此时，宽度变为980px，而高度仍然为608.25px，这显然是不对的
方法二：aspect-ratio
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>html,body {margin: 0;padding: 0;}.aspect-container{width: 100%;aspect-ratio: 16/9;background-color: black;} </style>
</head><body><div class="aspect-container"></div>
</body></html>效果：
- aspect-ratio是CSS中新引入控制元素“宽高比”的属性
aspect-ratio取值形式：
- aspect-ratio:宽度比例/高度比例
- aspect-ratio:数值，等价于“数值/1”，例如aspect:ratio:2，表示“宽高比等于2比1”