162

iFrameをレスポンシブにできますか？、およびコメント/回答の1つが私をこのJSFiddleに導きました。

しかし、自分のニーズに合わせて HTML と CSS を実装しようとしたとき、同じ結果/成功はありませんでした。私は独自の JSFiddleを作成したので、それが私にとってどのように機能しないかを示すことができました。私が使用しているiFrameのタイプと関係があると確信しています（たとえば、製品画像もレスポンシブである必要があるのでしょうか？）

私の主な懸念は、ブログの読者が iPhone で私のブログにアクセスしたときに、すべてを x 幅 (すべてのコンテンツで 100%) にしたくないため、iFrame が誤動作し、幅が広い唯一の要素になることです (したがって、固執します)。他のすべてのコンテンツを超えて - それが理にかなっていますか?)

なぜ機能しないのか誰か知っていますか？

これが私のJSFiddleのHTMLとCSSです（リンクをクリックしたくない場合）：

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.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%;
}
<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
    <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe>
  </div>
</div>

4

24 に答える 24

134

私はあなたに信じられないほどの歌う猫の解決策を提示します=）

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
ウィンドウ バーを移動すると、iframe が応答してサイズ変更されます。

あるいは、固有比率テクニックを使用することもできます

  • これは、上記の同じソリューションの代替オプションです (トマト、トマト)
.iframe-container {
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 */
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
于 2015-04-21T22:30:44.853 に答える
68

このコードを使用して応答性を高めてみてください

iframe, object, embed {
    max-width: 100%;
}
于 2013-09-14T11:45:45.660 に答える
46

Dave Rupert / Chris Coyier からの解決策を見つけました。しかし、スクロールを利用できるようにしたかったので、これを思いつきました：

.myIframe {
  position: relative;
  padding-bottom: 65.25%;
  padding-top: 30px;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /*<<--- THIS IS THE KEY*/ 
  border: solid black 1px;
}

.myIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="myIframe">
  <iframe> </iframe>
</div>

于 2014-02-10T03:09:47.310 に答える
13

このソリューションを確認してください。わたしにはできる

https://jsfiddle.net/y49jpdns/

<html lang="en" class="no-js">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>
    html body {
      width: 100%;
      height: 100%;
      padding: 0px;
      margin: 0px;
      overflow: hidden;
      font-family: arial;
      font-size: 10px;
      color: #6e6e6e;
      background-color: #000;
    }
    
    #preview-frame {
      width: 100%;
      background-color: #fff;
    }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
    var calcHeight = function() {
      $('#preview-frame').height($(window).height());
    }

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

    $(window).resize(function() {
      calcHeight();
    }).load(function() {
      calcHeight();
    });
  </script>
</head>

<body>
  <iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
  </iframe>
</body>

</html>

于 2014-08-05T19:37:04.223 に答える
11 
iframe{
  max-width: 100% !important;
}
于 2014-05-27T21:27:40.080 に答える
9

iFrame は、 Intrinsic Ratio Techniqueと呼ばれる小さな CSS テクニックを使用して、縦横比を維持しながら完全にレスポンシブにすることができます。この質問に具体的に対処するブログ投稿を書きました: https://benmarshall.me/responsive-iframes/

この要点は次のとおりです。

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}


/* 16x9 Aspect Ratio */

.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}


/* 4x3 Aspect Ratio */

.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

ブーム、完全に反応します！

于 2017-12-12T21:53:28.393 に答える
9

iframe はレスポンシブにできません。iframe コンテナをレスポンシブにすることはできますが、それが表示するコンテンツをレスポンシブにすることはできません。これは、独自の高さと幅が設定された Web ページであるためです。

フィドル リンクの例は、サイズが宣言されていない埋め込まれた YouTube ビデオ リンクを表示しているため、機能します。

于 2013-07-25T20:11:14.090 に答える
2

ピクセル単位で指定された iframe の高さと幅を削除し、パーセンテージを使用します

iframe{  max-width: 100%;}
于 2015-03-15T06:17:51.117 に答える
1

@Connor Cushion Mulhallのコードを調整することで解決しました

iframe, object, embed {
  width: 100%;
  display: block !important;
}

于 2015-12-02T08:51:36.437 に答える
1

Bootstrap CSS ライブラリを使用している場合は、それが提供するレスポンシブ埋め込みクラスを使用できます。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

いくつかの異なる縦横比がサポートされています。ドキュメントを参照してください。

于 2020-10-05T18:01:51.733 に答える
0

私はこのトピックについてさらに検索しており、最終的には良い答えが得られます。次のように試すことができます：

.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
<div class="wrapper">
  <div class="container">
    <iframe src="there is path of your iframe"></iframe>
   </div>
</div>

于 2015-04-09T09:11:07.710 に答える
0

「iframe」をレスポンシブにし、すべてのデバイス画面に適合させるための最良のソリューションは、次のコードを適用するだけです (ゲーム サイトでうまく機能します)。

iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}

@media screen and (max-width:992px){.iframe iframe{height:720px}}
@media screen and (max-width:768px){.iframe iframe{height:720px}}
@media screen and (max-width:720px){.iframe iframe{height:720px}}
@media screen and (max-width:479px){.iframe iframe{height:480px}}
@media screen and (max-height:400px){.iframe iframe{height:360px}}

すべてのデバイスに適合するレスポンシブ ゲーム コンテナーを探している場合は、高度な CSS @media クエリを使用するこのコードを適用します。

于 2016-08-06T13:03:36.703 に答える