調整窗口大小的iframe

我想根據窗口大小縮放iframe。來通過iframe是一個1600像素x 900px的html5遊戲調整窗口大小的iframe

我已經使用下面的腳本來擴展遊戲，所以我知道可以做很多事情。雖然下面的代碼將遊戲渲染爲一個小方塊，但是在保持16：9縱橫比的同時，我是否可以通過任何方式縮放以適應窗口？

<head> 

<style type="text/css"> 

    .tab{ 
     position:relative; 
     width:265px;170px; 
    } 
    .tab iframe{ 
     position:relative; 
     -webkit-transform: scale(0.3, 0.29); 
     -moz-transform: scale(0.3, 0.29); 
     transform: scale(0.3, 0.29); 
     -moz-transform-origin:0 0; 
     -webkit-transform-origin:0 0; 
     transform-origin:0 0; 
     position:relative; 
     z-index:90; 
    } 
    </style> 
</head> 

<body> 

    <div id="tab0" class="tab"> 
     <iframe src="game.html" width="1600" height="900" scrolling="no"></iframe> 
    </div> 

</body>

僅供參考我是一個遊戲的藝術家，並只爲尋求對話和其他較小的遊戲功能使用的代碼（使用Javascript/CSS/HTML）。我目前是該項目的最後一名工作人員，並要求將此功能應用到遊戲中。

任何幫助將不勝感激！

來源

2012-02-28 Sonnyjim

<iframe src="game.html" width="100%" height="100%" scrolling="no"></iframe>

來源

2012-02-28 15:27:22

您無法每次縮放到窗口的高度和寬度並保持16：9的比例，這在數學上是不可能的。如果要保持16：9的比例不變，則可以取窗寬或高度，然後將對面的網站縮放到正確的值以保持比例。

I.E.您的窗口被調整爲800px寬度和600px高度，並且您希望將窗口寬度保持爲滿，那麼您必須將您的框的高度縮放到450px以保持16：9的比例。

來源

2012-02-28 15:34:09

感謝您的意見。我打算將它基於窗口寬度。爲了讓我的問題更清楚一些，是否有可能將遊戲/ iframe的分辨率保持在1600px x 900px，無論目前的窗口大小是多少 - 使用變換尺度？ – Sonnyjim 2012-02-28 15:37:57

@Sonnyjim其實你必須考慮寬度和高度。如果在Sven的例子中，窗口高度小於450像素，則應該將其作爲iframe高度並根據它計算寬度。 – 2012-02-28 15:42:25

如果你使用jQuery，你可以做到這一點非常簡單。然後你有resize（）函數。在加載和每次調整窗口大小時，您都必須計算出新的寬度。高度的公式是（box-width * 9/16）。而你設置的寬度爲100％的盒子在每次全窗口寬度時都有。 – 2012-02-28 15:44:13

我不喜歡這樣，使用jQuery

$(document).ready(function(){ 
    $('iframe').attr('width',$(window).width()); 
    $('iframe').attr('height',($('iframe').attr('width') * (9/16))); 
})

注：這不會使IFRAME 1600個像素寬，它只是讓整個寬度，並使高度=的寬度乘以9/16即：保持16：9的寬高比。

來源

2012-02-28 15:56:39 daveyfaherty

調整窗口大小的iframe

回答

相關問題