☰

iframe をレスポンシブにする 質問する

tag-icon • tag-icon css iframe responsive-design
iframe をレスポンシブにする 質問する

読んでいた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>

ベストアンサー1

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

.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%;
}

おすすめ記事