背景介绍
项目中有一个这样的需求,要求页面布局中的某个区域随页面大小变化时,保持固定的宽高比例,布局如下图:
布局具体要求:
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 );
结束语
由于之前没接触过这样的需求,没什么思路,网上找了找资料,发现都不能满足需求,最后琢磨出了这个计算方法,记录一下,希望能帮到有相同需求的小伙伴们