使用 JavaScript 维护 DIV 的比率 [重复]

【问题标题】：Maintaining ratio of a DIV using JavaScript [duplicate]使用 JavaScript 维护 DIV 的比率 [重复]
【发布时间】：2020-09-22 08:00:30
【问题描述】：

我正在尝试创建一个 16:9 的画布，无论屏幕大小如何，它都保持 16:9。有用！但只有一个方向……

function ratio () {
    var w = window.innerWidth;
    var newH = w * 0.5625;

    document.getElementById('design').style.height = (newH + 'px');
}

window.onload = ratio;
window.onresize = ratio;

所以当窗口的高度太大时它可以工作，但当宽度太大时就不行。我的小脑袋无法理解如何让它反过来工作 - 当窗口太宽时。

我知道有一个带有填充的 CSS 解决方法，但这在我的情况下不起作用 - 无论如何我更喜欢使用 JS。

仅供参考.. 这是页面：https://clever-carbon.webflow.io/

【问题讨论】：

标签： javascript css

【解决方案1】：

如果我理解正确，这可能会有所帮助：

function ratio () {
    var w = window.innerWidth
    var h = window.innerHeight
    var actualRatioW = w/h
    var actualRatioH = h/w
    var desiredRatioW = 16/9
    var desiredRatioH = 9/16
    var maxW = Math.min(window.innerWidth, (desiredRatioW/actualRatioW)*window.innerWidth)
    var maxH = Math.min(window.innerHeight, (desiredRatioH/actualRatioH)*window.innerHeight)

    document.getElementById('design').style.height = (maxH + 'px');
    document.getElementById('design').style.width = (maxW + 'px');
}

window.onload = ratio;
window.onresize = ratio;

我们得到期望比率与实际比率之间的比率，将其应用于高度/宽度，并获得该比率与实际高度/宽度之间的最小值。这有助于在任一边太长/太窄时强制执行比率。

您可能还希望将包装器的高度保持在100vh

【讨论】：

这太好了，谢谢！