当前位置：首页 > news >正文

面试笔记【16:9区域问题】

news 2025/8/1 16:25:19

问题描述

最近面试遇到了这样一个【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>

效果：