在調整瀏覽器窗口大小時是否保持寬高比？

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() ，這再次發現內部長寬比不正確，因此不斷觸發並調整infinitum的大小。

要解決此問題，您需要：

1. 通過調整大小來檢測外部尺寸，然后測試innerWidth / innerHeight。 請記住，這可能會隨着用戶使用其瀏覽器而改變。
2. 調用resizeTo ，其大小應考慮到外部鍍鉻並為innerWidth / inner Height實現所需的寬高比。