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

Я пытаюсь масштабировать iframe на основе размера окна. Пройдя через iframe - игра html5 на 1600px x 900pxМасштабирование iframe при изменении размера окна

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

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

источник

2012-02-28 Sonnyjim

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

источник

2012-02-28 15:27:22

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

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

источник

2012-02-28 15:34:09

Спасибо за ваш вклад. Я планирую установить его на ширине окон. Чтобы быть более ясным в моем вопросе, возможно ли сохранить разрешение игры/iframe при 1600px x 900px, независимо от того, какой размер в настоящее время находится в этом окне - с использованием transform-scale? – Sonnyjim

@Sonnyjim На самом деле вам нужно учитывать как ширину, так и высоту. Если в примере Свена высота окна меньше 450 пикселей, вы должны принять это как высоту iframe и вычислить ее ширину. –

Вы можете сделать это очень легко, если используете jQuery. Затем у вас есть функция resize(). При загрузке и при каждом изменении размера окна вы должны определить новую ширину. Формула для высоты будет (ширина окна * 9/16). И поле, которое вы устанавливаете на ширину 100%, должно иметь в каждом случае полную ширину окна. –

Я бы сделать это так, с помощью 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-28 15:56:39 daveyfaherty

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

ответ

Смежные вопросы