目录
问题描述
最近面试遇到了这样一个【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”