我在使用宽高比时遇到了一些困难。
我正在为我的网页设计一个平板电脑部分。
在主页面上我有一个图像幻灯片。
幻灯片显示是响应式的,并根据平板电脑处于水平或垂直视图来改变大小。
我希望包含div的幻灯片可以保持宽高比,但也能保持响应。
我尝试使用的宽高比是Facebook封面照片的大小。
照片尺寸为851px
宽,315px
高。
我正在搜索SO并发现:
width: 100vw;
height: 56.25vw; /* height:width ratio = 9/16 = .5625 */
我很难用数学方法来保持这些尺寸的照片的纵横比相同但反应灵敏。
我无法弄清楚的最大的事情是,如果我的宽度是width: 100vw;
那么我的身高是多少来保持比例?
编辑:不重复,我的问题专门针对如何使用未在“重复问题”答案中列出的特定方法来查找特定维度的宽高比。