在窗口调整大小时缩放 iframe答案

【问题标题】：Scaling an iframe on window resize在窗口调整大小时缩放 iframe
【发布时间】：2012-02-29 00:04:19
【问题描述】：

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

任何帮助将不胜感激！

【问题讨论】：

标签： css iframe webkit-transform

【解决方案1】：

我会这样做，使用 jQuery

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

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

【讨论】：

【解决方案2】：

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

I.E.您的窗口被调整为 800 像素宽度和 600 像素高度，并且您想要保持窗口的宽度完整，那么您必须将框的高度缩放到 450 像素以保持 16:9 的比例。

【讨论】：

感谢您的意见。我计划以窗户宽度为基础。为了让我的问题更清楚，是否可以将游戏/iframe 分辨率保持在 1600 像素 x 900 像素，无论当前窗口大小如何 - 使用变换比例？
@Sonnyjim 实际上，您必须同时考虑宽度和高度。如果在 Sven 的示例中，窗口高度小于 450 像素，则应将其作为 iframe 高度并从中计算宽度。
如果你使用 jQuery，你可以很容易地做到这一点。然后你有 resize() 函数。在加载和每次调整窗口大小时，您必须计算出新的宽度。高度的公式是 (box-width*9/16)。并且您设置为 100% 宽度的框每次都具有完整的窗口宽度。
@Sonnyjim 你的另一个问题，不，实际上不可能从窗口影响 iframe 的内容。您应该在内容本身中这样做。
@Lister 先生 - 非常好的评论我还没有考虑过。如果要防止滚动，则必须根据宽度计算比率。如果新高度大于现有高度，则根据高度计算比率，然后为框设置新高度和宽度。

【解决方案3】：

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

【讨论】：