Javascript 调整浏览器大小时保持视频的纵横比

我正在使用一个视频编辑工具，在水平和垂直调整屏幕大小时，我需要保持视频的

16:9

纵横比。到目前为止，当水平调整大小和垂直调整大小时，我都能让它按预期工作，但当垂直调整大小时，它却无法工作。下面是我用来计算视频高度并调整其大小的Javascript代码（注意

else

子句是空的，因为代码应该放在这里）：

const calculateHeight=（）=>{
//获取页面上的其他元素
const header=document.querySelector（“.main navigation”）；
const meshTopBar=document.querySelector（'.mesh__top-bar'）；
const footer=document.querySelector（'.mesh__底部条形图'）；
//获取要将窗高度应用于其的截面
const mainSection=document.querySelector（'.insert level container'）；
//获取视频元素
常量编辑器=document.querySelector（'.mesh_uuinsert-editor-container'）；
const video=document.querySelector（'.mesh_uuinsert-editor-video-container'）；
//通过计算窗高度减去其他图元的高度，将高度应用于主体部分
如果（mainSection！==null）{
main section.style.height=（window.innerHeight-header.offsetHeight-meshTopBar.offsetHeight-footer.offsetHeight）+“px”；
}
//这应该是视频的理想高度
video.style.minHeight=（（video.offsetWidth*9）/16）+“px”；
//如果视频高度大于截面高度（如上计算），则调整其大小
如果（video.offsetHeight+115>main节offsetHeight）{
video.style.minHeight=video.offsetHeight-1+'px'；
editor.style.maxWidth=video.offsetHeight*16/9+'px'；
}否则{
//这就是垂直调整大小的逻辑所在
}
}

这些项目的相关CSS为：

.mesh\uuuu insert-editor-container{
左边距：自动；
右边距：自动；
}
.mesh_uuuinsert-editor-video-container{
位置：相对位置；
宽度：100%：
}

以及HTML：

所有这些代码都是：

• 获取页面上所有元素的高度，将它们相加，然后通过减去该高度来计算主要部分的高度
• 如果视频高度大于剖面高度，我会在每次调整窗口大小时将其高度降低

  -1px

  ，并计算新的宽度

上面所有的代码都给了我，这在大多数情况下都非常有效，但是当

if

语句中的条件不满足时，我需要调整视频的大小。我在

else

语句中尝试的所有内容都变得“神经质”

---

如果有更好的解决办法，我们将不胜感激。谢谢大家

CSS纵横比技巧可能是一个很好的解决方案：

该方法利用了CSS中的一个怪癖，即基于百分比值的

填充将相对于元素的宽度。使用此技巧创建一个容器，重要的一点是这行：

padding-top: calc(9/16 * 100%);

该值基于所需的纵横比（在本例中为9高16宽）计算正确的高度，并通过乘以
100%
生成相对于图元宽度的高度

在容器保持纵横比的情况下，只需将内容放在绝对定位的内部div中，就可以了。该解决方案在这一点上是完全响应的


*{框大小：边框框}
.外部最大宽度{
最大宽度：960像素；
保证金：0自动；
}
.纵横比框{
宽度：100%；
填料顶部：钙（9/16*100%）；
位置：相对位置；
边框：2px纯红；/*对于演示可见性，请删除*/
}
.纵横比框内容{
位置：绝对位置；
宽度：100%；
排名：0；
左：0；
边框：2px纯蓝色；/*对于演示可见性，请删除*/
}
.视频占位符{
显示：块；
宽度：100%；
高度：自动；
}
成功了！我使用了这个惊人的CSS唯一解决方案：类似于BugsArePeopleToo的建议，来自eightarmshq：

.content{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
身高：100%；
背景:#555；
盒影：插图1vh 1vh 10vh 0 rgba（0,0,0,0.5）；
显示器：flex；
框大小：边框框；
边框：25px实心#cecece；
}
我将它的高度降低了-1px
。。。当您缓慢调整大小时，此功能有效。如果以正常速度调整窗口大小，是否有效。。。但是为了提供一个改进的建议，考虑把你所有的计算都从你的<代码>主段< /代码>下，而不是目前的视频高度（和宽度）。也就是说，根据
main部分的宽度和高度进行计算。谢谢您的回复！我也试过了，但是
main部分
比视频本身要高，所以它也会把事情搞糟，谢谢你的回复！这当然是一个很好的方法，我也尝试过，但当你只垂直调整大小时，这不起作用：这是我最初的问题