调整窗口大小的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

回答

相关问题