0

我正在尝试根据窗口大小缩放 iframe。通过 iframe 是一个 1600px x 900px 的 html5 游戏

我已经使用下面的脚本来扩展游戏，所以我知道可以做很多事情。虽然下面的代码将游戏渲染成一个小盒子，但有什么办法可以让它缩放以适应窗口，同时保持 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）用于任务对话和其他较小的游戏功能。我目前是该项目的最后一个工作人员，并且要求将此功能实现到游戏中。

任何帮助将不胜感激！

4

3 回答 3

5

我会这样做，使用 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-28T15:56:39.110 回答
1

您不能每次都缩放到窗口的高度和宽度并保持 16:9 的比例，这在数学上是不可能的。如果您想保持 16:9 的比例不变，您可以获取窗口宽度或高度，然后将相反的站点缩放到正确的值以保持您的比例。

IE 你的窗口被调整为 800px 宽度和 600px 高度，并且你想保持窗口的宽度是完整的，那么你必须将你的框的高度缩放到 450px 以保持 16:9 的比例。

于 2012-02-28T15:34:09.823 回答
0 
<iframe src="game.html" width="100%" height="100%" scrolling="no"></iframe>
于 2012-02-28T15:27:22.167 回答