ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

iframe要素をアスペクト比を保持したままレスポンシブ化する方法

May 21 2017

iframe要素といえばちょいと昔(XHTML1.1とか)では非推奨となってましたが
HTML5になるとWebアプリとしての期待からか復活しよりまして(笑)

そらーもうGoogleマップからYoutubeからなんでもかんでも
埋め込みコードを発行するとiframeだらけの水泳大会ですわ。
(決してヤケクソになっているわけではありません)

さて、これがスマホ対応となるとそれなりに面倒くさいんですわね。
そんなもん幅100%指定してやればいいんじゃねえのか、と思いますが
そーんな簡単にはいかんのですよね。
縦横の比率を保持したまま、とかになるとそれなりに頭使わんといけませんでした。

まずは

  • iframe要素をdivで囲んでしまう
  • どちらにもpositionプロパティを設定。
    (divにはrelative、iframeにはabsolute)
  • 親要素のpaddingで、画面比率を無理からねじ込む

という事を考えてみる。

4:3と16:9さえあれば大概は対処出来るやろ、と思いやす。
横幅が100%やとすると、高さの比率 ÷ 幅の比率 × 100なので
4:3なら75%で16:9なら56.25%。

HTMLはこんな感じ。

<div class="iframebox">
 <iframe src="http://xxxxxxxxxxxx.xxx" frameborder="0"></iframe>
</div>

CSSはこう。(これは4:3の場合です。paddingの値で調節)

.iframebox {
   position: relative;
 width: 100%;
    padding: 75% 0 0 0; 
}
.iframebox iframe {
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
}

これできっちりと比率を保持したままレスポンシブ化が出来ます。

| Posted in CSS | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Sep 2017 October 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31