web-dev-qa-db-ja.com

画像のようにiFrame CSSの幅を100％拡大縮小する

CSSを使用してiFrameをwidth: 100%にスケーリングします。高さは幅に比例してスケーリングする必要があります。

<img>タグを使用すると、これは正常に機能します。

画像とiFrameの両方で、HTMLで幅と高さが定義されています。

ここにいくつかの例があります：

<html>
    <style>
        #a{ width: 500px; }
        img{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <img src="http://lorempixel.com/200/150/" width="200" height="150" />
        </div>
    </body>

これは画像に対してはうまく機能しますが、iFrameに対しても同じ動作が必要です。

<html>
    <style>
        #a{ width: 900px; background: grey;}
        iframe{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>

IFrameは100％の幅でレンダリングされますが、画像のように高さに比例して拡大縮小されません。

cssiframeresponsive-design
52
Oliver

画像とiframeの大きな違いは、画像がアスペクト比を保持しているという事実です。画像とiframeを組み合わせて、レスポンシブiframeを作成できます。この回答者があなたの質問を願っています。

たとえば、次のリンクを確認してください： http://jsfiddle.net/Masau/7WRHM/

HTML：

<div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="http://placehold.it/16x9"/>
        <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>Please scale the "result" window to notice the effect.</p>
</div>

CSS：

html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

注：これは、固定アスペクト比でのみ機能します。

110
Rik

@Rik、これはよりクリーンなアプローチだと思います。インラインの 'height'および 'width'プロパティ（フィドルでランダムな値を設定してそれを証明します）およびCSSの 'max-width'プロパティ（@Walfを読んでくれますか？）で動作します。

HTML：

<div class="wrapper">
    <div class="h_iframe">
        <iframe height="2" width="2" src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>Please scale the "result" window to notice the effect.</p>
</div>

CSS：

html,body        {height: 100%;}
.wrapper         {width: 80%; max-width: 600px; height: 100%; margin: 0 auto; background: #CCC}
.h_iframe        {position: relative; padding-top: 56%;}
.h_iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

http://jsfiddle.net/7WRHM/1001/

56
Simone Lazzari

このソリューションが一番気に入っています。シンプル、スケーラブル、レスポンシブ。ここでのアイデアは、ビデオのアスペクト比に設定された下部パディングで高さゼロの外部divを作成することです。 iframeは幅と高さの両方で100％にスケーリングされ、外側のコンテナを完全に満たします。外側のコンテナは幅に応じて高さを自動的に調整し、内側のiframeはそれに応じて自動的に調整されます。

<div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
    <iframe style="position:absolute; left:0; top:0; width:100%; height:100%"
        src="http://www.youtube.com/embed/RksyMaJiD8Y">
    </iframe>
</div>

ここでの唯一の変数は、外部divのpadding-bottom値です。 4：3アスペクト比のビデオでは75％、ワイドスクリーン16：9アスペクト比のビデオでは56.25％です。

13
Anachronist

ここでは、％の代わりにビューポート単位を使用できます。このような：

iframe {
    max-width: 100vw;
    max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
}

DEMO （サイズを変更して効果を確認）

body {
  margin: 0;
}
.a {
  max-width: 560px;
  background: grey;
}
img {
  width: 100%;
  height: auto
}
iframe {
  max-width: 100vw;
  max-height: 56.25vw;
  /* 315/560 = .5625 */
}
<div class="a">
  <img src="http://lorempixel.com/560/315/" width="560" height="315" />
</div>

<div class="a">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
</div>
4
Danield

@Anachronistはここに最も近く、@ Simoneはそれほど遠くありません。要素のパディングの割合に関する注意点は、要素が親の幅に基づいているため、コンテナと異なる場合、比率がオフになることです。

最も信頼性が高く、最も簡単な答えは次のとおりです。

body {
  /* for demo */
  background: lightgray;
}
.fixed-aspect-wrapper {
  /* anything or nothing, it doesn't matter */
  width: 60%;
  /* only need if other rulesets give this padding */
  padding: 0;
}
.fixed-aspect-padder {
  height: 0;
  /* last padding dimension is (100 * height / width) of item to be scaled */
  padding: 0 0 56.25%;
  position: relative;
  /* only need next 2 rules if other rulesets change these */
  margin: 0;
  width: auto;
}
.whatever-needs-the-fixed-aspect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* for demo */
  border: 0;
  background: white;
}
<div class="fixed-aspect-wrapper">
  <div class="fixed-aspect-padder">
    <iframe class="whatever-needs-the-fixed-aspect" src="/"></iframe>
  </div>
</div>
3
Walf