我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
解释 Intrinsic Ratios in css
自从互联网 Web 诞生以来，外国开发者就开始了对 Intrinsic Ratios (aka Aspect Ratios) 的探讨。
- Intrinsic Ratios 直译：固有的比例。
- aka：你见过 rapper 谈话吗？这个 aka 就是他们常说的『Hey man, 我是 AA aka ZZ』中的 aka，是 also known as 的缩写。
- Aspect Ratios 直译：纵横比。
用中国前端开发者的话说，就是 在未知宽高的状况下，使一个元素放弃固定的长宽比。
（备注：该问题要求未知宽高是因为，如果已知元素宽度，而固定的长宽比也是晓得的，那么高度是能够间接算进去的，能够在 css 写死 width 和 height，这种问题没挑战性。所以要求未知宽高）
Intrinsic Ratios 案例
比方做一个固定比例的视频播放器，不论你上传的视频是什么分辨率，你总让它放弃 16:9 的比例。此外网页须要是响应式的，视频宽度是 100%，即视频宽度随着浏览器宽度变动而变动，也就是说：该元素的具体宽度、高度是未知的。那么这就是一种 Intrinsic Ratios 问题。
举个例子
举个例子，这里有个 div：
<html>
<body>
<div class="main">
</div>
</body>
</html>如果实现这个 div 的宽: 高 =2:1，你会怎么做？
我看看有多少人认为是这样子实现的：
.main {
width: 100%;
height: 50%;
}这样子不能够。为什么？
css 中 height 属性，如果设置为百分比，会用它的父元素的 高度 乘以 height 百分比。
然而这个案例中，div 的父元素 body 没有设置高度，也就是说 body 的实在高度是靠它的子元素来确定的，它的孩子有多高，它就有多高。
好家伙，死锁了。
所以这种状况下，如果父元素高度不确定，那么 height 百分比就有效了！以防死锁。
传统解决方案
通常，咱们这么实现：
.main {
width: 100%;
height: 0;
padding-bottom: 50%;
}代码片段
设置 height 为 0，再设置 padding-bottom 为 50%。为什么这样就能够了呢？
css 中 padding-top 或padding-bottom属性，如果设置为百分比，会用它的父元素的 宽度 乘以百分比。
看到差异了吗？尽管 padding-bottom 和height同样是表征 y 轴的款式，然而作为百分比时，他们却要乘以不同的底数。预计很多初学者都被搞晕了吧。
古代解决方案
下面是传统的解决方案，如果要实现 16:9 的比例，其实对开发者不太敌对，你能要设 padding-bottom 为 16/9=56.25% 才能够，然而可读性很差。
在 2021 年 1 月，Chrome 88 版本公布，反对了新个性：CSS aspect-ratio，能够间接用来解决 Intrinsic Ratios 问题。
当初你能够间接这么写：
.main {
width: 100%;
aspect-ratio: 16/9;
}代码片段
然而它的确是比拟新的个性：
- 如果是 toC 或者 toB 的我的项目，倡议应用传统解决方案。
- 如果是外部的工具或平台，能够大胆的应用新版个性。
具体兼容性如下：
写在最初
我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。