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

·  阅读 69
记录设置动态元素的宽高比

背景介绍

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

布局具体要求:

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 );
复制代码

结束语

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

分类:
前端
标签: