在窗口调整大小调整大小的iframe的宽度(Resizing an iframe's wid

我希望把旁边的一个侧边栏的iframe。 侧边栏与的250像素恒定的，我想iframe的宽度来填充屏幕的其余部分。 因此，它的宽度是窗口大小减250像素。 而我需要这种动态变化。 我坚持我现有的代码。

<script type="text/javascript">$(window).resize(function() {
  $('iframe').prepend(width:$(window).width()px;);

});

</script>
<div style="float:left;"><iframe src="iframe url" 
frameborder="0" 
noresize="noresize" id ="iframe"
style="position:absolute; background:transparent; width:75%;height:100%;top:38px;border:none;padding:0;" />
</iframe>
</div>

这是JavaScript和iframe中。 我究竟做错了什么？

Answer 1:

使用此JS：

$(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

$(window).resize(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

你也应该让周围的DIV的位置是：相对于利用绝对定位的。

Answer 2:

这将工作，以填补你有任何响应空间和保持原有的大小，如果屏幕更大： https://jsfiddle.net/koaab543/2/

我使用的是原来的高度和宽度来计算比例。 然后让电流宽度被限制在空间大小与CSS，并从该导出新的高度。

高度/宽度= X / currentWidth

 function responseveIframe() { $('iframe').height( $('iframe').attr("height") / $('iframe').attr("width") * $('iframe').width() ); } responseveIframe(); $(window).resize(function() { responseveIframe(); }); 

 iframe { max-width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <iframe width="854" height="480" src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe> 

文章来源: Resizing an iframe's width on window resize