Question

我正在尝试根据窗口大小缩放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）进行任务对话和其他较小的游戏功能。我目前是最后一个参与该项目的人，并且要求在游戏中实现此功能。

任何帮助将不胜感激！

Answer 1

我会这样做，使用jQuery

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

注意：这不会使iframe 1600像素宽，它只是使它成为全宽，并使height =宽度乘以9/16即：保持16：9的宽高比。

Answer 2

您无法每次都缩放到窗口高度和宽度，并保持16：9的比例，这是不可能的数学。如果你想保持16：9的比例不变，你可以采用窗口宽度或高度，然后将相反的位置缩放到正确的值，以保持你的比例。

即。您的窗口调整为800px宽度和600px高度，并且您希望保持窗口的宽度完整，然后您必须将框的高度缩放到450px以保持16：9的比率。

Answer 3

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

在窗口上缩放iframe调整大小

3 个答案: