记录设置动态元素的宽高比

背景介绍

项目中有一个这样的需求，要求页面布局中的某个区域随页面大小变化时，保持固定的宽高比例，布局如下图：

布局具体要求：

1、B、C、D组成部分要水平居中（这里直接用flex布局轻松搞定）

2、保持B的宽高比为固定值（如 16/9），A可以认为是网页，A的高度变化时，C的高度保持不变，B的宽高随之变化，可以认为B的高加上C的高等于A的高度

解决思路

如下图，设定A的高度为h，B的宽高为w1 h1，C的高度为h2

根据要求，可以得出以下公式：

h = h1 + h2
w1 / h1 = 16 / 9
// 由上面可以得出 w1 的计算公式
w1 = (h - h2) * 16 / 9
复制代码

放到项目中验证，h 的值为 100vh，根据设计图 h2 取 52px，得出 B 的宽度 

width: calc((100vh - 52px) * 16 /9 );
复制代码

结束语

由于之前没接触过这样的需求，没什么思路，网上找了找资料，发现都不能满足需求，最后琢磨出了这个计算方法，记录一下，希望能帮到有相同需求的小伙伴们