在浏览器窗口调整大小时保持纵横比？

Question

我有一个带有图像的简单页面，当用户单击图像时，它会打开一个新的浏览器窗口，图像填充该区域。我在新窗口上设置了 css，这样图像的高度和宽度都是 100%（并且 overflow 设置为 hidden），以便可以调整窗口大小。

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

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

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

仅仅是因为高度和宽度从来都不是正确的比例（我应该每次手动将宽度设置为整数）还是我做错了什么？还是有其他方法可以更直接地获得我想要的东西？

Answer 1

我相信你在正确的轨道上，但resizeTo() 调整了整个浏览器窗口的大小，包括窗口框架、工具栏、菜单等。

因此，当您调用 resizeTo() 时，它会触发，检测到 inner 高度/宽度不是所需的纵横比，并调整整个窗口、框架和工具栏等的大小。 p>

然后再次触发resizeTo()，它再次发现内部纵横比不正确，因此不断触发和调整大小无限。

要解决此问题，您需要：

1. 检测通过调整大小然后测试innerWidth/innerHeight 的外部尺寸。请记住，这可能会随着用户使用浏览器而改变。
2. 调用resizeTo，其大小应考虑到外部镶边并达到所需的内部宽度/内部高度的纵横比。