Javascript 是否在浏览器窗口调整时保持纵横比？

我有一个包含图像的简单页面，当用户单击图像时，它会打开一个新的浏览器窗口，其中图像填充了整个区域。我在新窗口上设置了css，这样图像的高度和宽度都是100%（并且

溢出

设置为

隐藏

），这样可以调整窗口的大小

但我需要的是，如果用户调整窗口的大小，窗口将保持纵横比。现在，我被困住了，因为我不知道这项活动是如何进行的，但我想我让这件事变得比它需要的更难了。现在我有：

$(function(){
    $(window).resize(function() {
        var height = $(this).attr("innerHeight");
        var width = $(this).attr("innerWidth");
        if(height/width != .75){
            window.resizeTo(width,width*.75);
        }
    });
});

在添加条件之前，窗口将立即开始收缩（显然，打开一个新窗口会触发调整大小事件）。添加条件以防止在窗口打开时发生这种情况，但任何大小调整都会再次开始收缩

---

这仅仅是因为高度和宽度从来都不是正确的比例（我是否应该一直手动将宽度设置为一个整数），还是因为我在做其他事情？或者有没有其他更直接的方法来获取我想要的内容？

我相信你说得对，但是

resizeTo（）

会调整整个浏览器窗口的大小，包括窗框、工具栏、菜单等

因此，当您调用

resizeTo（）

时，它会触发，检测内部高度/宽度不是所需的纵横比，并调整整个窗口、框架和工具栏以及所有窗口的大小

然后再次激发

resizeTo（）

，再次发现内部纵横比不正确，因此不断激发并调整大小

要解决此问题，您需要：

通过调整大小然后测试innerWidth/innerHeight来检测外部尺寸。请记住，这可能会随着用户使用浏览器而改变

调用

resizeTo

，其大小应考虑外部铬，并达到内部宽度/内部高度所需的纵横比

---

我想是你说的，但我还是有一些问题。它会在不同的尺寸之间“摇摆”，就像底部会增长和收缩一样。当我手动设置外部调整（例如，意味着我将外部宽度差设置为10）时，我似乎没有那么多问题。这似乎已经解决了，可能是一个取整的问题。也就是说，您设置了宽度为*0.75的高度，但是当它调整大小时，会再次触发调整大小事件，并且由于舍入，高度不完全是0.75 x宽度。尝试将测试和resizeTo（）调用四舍五入（使用Math.Ceiling）。仍然不起作用，但关于面板的外部/内部问题，您是正确的，等等。