Масштабирование фрейма при изменении размера окна - PullRequest
Новая
       18

Масштабирование фрейма при изменении размера окна

0 голосов
/ 28 февраля 2012

Я пытаюсь масштабировать фрейм в зависимости от размера окна. Прохождение iframe - это html5-игра с разрешением 1600 x 900 пикселей

Я использовал приведенный ниже скрипт для масштабирования игры, поэтому знаю, что многое можно сделать. Хотя приведенный ниже код отображает игру в небольшую рамку, можно ли как-нибудь изменить ее по размеру окна, сохранив соотношение сторон 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) только для диалогов квестов и других небольших игровых функций. Сейчас я последний работаю над проектом, и мне было предложено включить эту функцию в игру.

Любая помощь будет оценена!

Ответы [ 3 ]

5 голосов
/ 28 февраля 2012

Я бы сделал это так, используя jQuery 

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

Примечание: это не делает iframe шириной 1600 пикселей, он просто делает его полной шириной и делает высоту = ширину, умноженную на 9/16, то есть: сохраняет соотношение сторон 16: 9.

1 голос
/ 28 февраля 2012

Вы не можете масштабировать до высоты и ширины окна в любое время и сохранять соотношение 16: 9, что математически невозможно. Если вы хотите сохранить соотношение 16: 9 постоянным, вы можете взять ширину окна или высоту, а затем масштабировать противоположный сайт до нужного значения, чтобы сохранить ваше соотношение.

т.е. размер вашего окна изменяется до 800px ширины и 600px высоты, и вы хотите сохранить ширину окна полностью, тогда вы должны масштабировать высоту вашего окна до 450px, чтобы сохранить соотношение 16: 9.

0 голосов
/ 28 февраля 2012 
<iframe src="game.html" width="100%" height="100%" scrolling="no"></iframe>
...