1

サイドバーの横にiframeを配置したい。サイドバーの定数は250pxで、iframeの幅が画面の残りの部分全体に表示されるようにします。したがって、幅はウィンドウサイズから250pxを引いたものになります。そして、これを動的に変更する必要があります。私は既存のコードに固執しています。

<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です。私は何が間違っているのですか？

4

2 に答える 2

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位置を相対位置にする必要があります。

于 2012-09-14T21:23:23.917 に答える
0

これは、応答して空いているスペースを埋め、画面がさらに大きい場合は元のサイズを維持するために機能します： 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>

于 2016-03-30T08:57:43.097 に答える