保持瀏覽器窗口大小的高寬比？

我有一個簡單的圖像頁面，當用戶點擊圖像時，它會打開一個新的瀏覽器窗口，圖像填滿該區域。我在新窗口中設置了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事件）。添加條件防止這種情況在窗口打開時發生，但任何調整大小都會再次開始收縮。

僅僅是因爲高度和寬度從來沒有完全正確的比例（我應該手動將寬度設置爲一個整數的時間）還是有什麼我做錯了？或者有沒有其他的方法可以讓我更清楚地瞭解我的情況？

來源

2010-03-21 Anthony

我相信你是在正確的軌道上，但resizeTo()大小調整整個瀏覽器窗口，包括窗框，工具欄，菜單等

所以，當你調用resizeTo()，它激發，檢測內部高度/寬度不是所需的寬高比，並調整整個窗口，框架和工具欄以及全部的大小。

然後再次觸發resizeTo()，這再次發現內部縱橫比不正確，因此不斷髮射和調整大小無限。

爲了解決這個問題，你需要：

檢測外形尺寸通過調整，然後測試innerWidth/innerHeight。請記住，這可以隨用戶使用瀏覽器而改變。
請致電resizeTo，其尺寸佔外部鍍鉻並達到內部寬度/內部高度所需的長寬比。

來源

2010-03-21 08:10:41 richardtallent

我想你叫它，但我仍然有棘手的問題。它在尺寸之間保持「搖擺」，就像底部會長大和縮小一樣。當我手動設置外部調整時（例如，我將外部寬度差設置爲10），我似乎沒有這個問題。它似乎已經被解決了。 – Anthony 2010-03-21 08:42:05

可能是一個舍入問題。也就是說，你設置了寬度* 0.75的高度，但是當它調整大小時，resize事件再次觸發，並且由於四捨五入，高度不是正好* 0.75×寬度。嘗試四捨五入（使用Math.Ceiling）測試和resizeTo（）調用。 – richardtallent 2010-03-22 08:14:34

仍然無法正常工作，但您對面板的外部/內部問題是正確的。 – Anthony 2010-05-04 18:50:15

保持瀏覽器窗口大小的高寬比？

回答

相關問題