2013-12-19 2 views
0

У меня есть iframe, который должен принимать значение ширины 60%, но высота может быть любой. Можно ли каким-либо образом «увеличить» содержимое iframe так, чтобы оно соответствовало с, а затем я могу просто установить высоту как высоту на этом уровне масштабирования? У меня нет идеи, что это возможно, но я могу найти только результаты здесь, связанные с изменением размера iframe вокруг содержимого. Поэтому любые советы приветствуются!Как я могу изменить размер содержимого iframe на основе размера iframe?

Благодаря

ответ

1

Существует свойство масштабирования в CSS с примерами здесь What Does 'zoom' do in CSS?

Вы можете определить масштаб увеличения, сравнивая новый размер окна до нужного размера, предназначенного для и масштабирования, что путь , Если вы используете jQuery, вы можете обнаружить изменения в событии изменения размера окна iFrame (я думаю).

// Assuming you've designed your page for a 1024px width 
var designWidth = 1024; 
$(window).resize(function() { 
    var w = $(window).width(); 
    /* calculate new zoom */ 
    var zoom = parseInt(w/designWidth * 100).toString() + "%"; 

    // Assuming all your content to resize is in an element with id "content" 
    $("#content").css("zoom", zoom); 
}); 

Грязный примером может быть что-то вроде:

page1.html

<!DOCTYPE html> 
<html> 
<body> 
<iframe width="50%" src="page2.html"></iframe> 
</body> 
</html> 

page2.html

<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script type="text/javascript"> 
$(window).resize(function() { 
    resize(); 
}); 

$(document).ready(function(){ 
    resize(); 
}); 

var designWidth = 300; 

function resize() { 
    var w = $(window).width(); 
    var zoom = parseInt(w/designWidth * 100).toString() + "%"; 
    $("#content").css("zoom", zoom); 
} 
</script> 
<div id="content">I get bigger and smaller!</div> 
</body> 
</html> 

Это работает для меня в последней версии Chrome.

+0

Это отлично работает !!! Благодаря! – Zach

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