我正在尝试根据窗口大小缩放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)进行任务对话和其他较小的游戏功能.我目前是最后一个参与该项目的人,并且要求在游戏中实现此功能.
任何帮助将不胜感激!
我会这样做,使用jQuery
$(document).ready(function(){
$('iframe').attr('width',$(window).width());
$('iframe').attr('height',($('iframe').attr('width') * (9/16)));
})
注意:这不会使iframe 1600像素宽,它只是使它成为全宽,并使height =宽度乘以9/16即:保持16:9宽高比.