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);
        }
    });
});

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

是不是因为高度和宽度从来都不是正确的比例（我应该手动将宽度设置为有时候的圆形数字）还是还有其他的东西我做错了？或者是否还有其他方法可以让我得到的东西更直接？

Answer 1

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

因此，当您调用resizeTo()时，它会触发，检测内部高度/宽度不是所需的宽高比，并调整整个窗口，框架和工具栏以及所有窗口的大小。

然后再次触发resizeTo()，再次发现内部宽高比不正确，因此不断触发无限广告。

要解决此问题，您需要：

通过调整大小然后测试innerWidth / innerHeight来检测外部大小。请记住，这可能会随着用户使用浏览器而发生变化。
调用resizeTo，其大小应考虑外部铬合金，并达到内部宽度/内部高度所需的宽高比。

保持浏览器窗口的宽高比调整大小？

1 个答案: