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

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

Daily Archives: 2017年5月21日

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

iframe要素といえばちょいと昔(XHTML1.1とか)では非推奨となってましたが HTML5になるとWebアプリとしての期待からか復活しよりまして(笑) そらーもうGoogleマップからYoutubeからなんでもかんでも 埋め込みコードを発行するとiframeだらけの水泳大会ですわ。 (決してヤケクソになっているわけではありません) さて、これがスマホ対応となるとそれなりに面倒くさいんですわね。 そんなもん幅100%指定してやればいいんじゃねえのか、と思いますが そーんな簡単にはいかんのですよね。 縦横の比率を保持したまま、とかになるとそれなりに頭使わんといけませんでした。 まずは iframe要素をdivで囲んでしまう どちらにもpositionプロパティを設定。 (divにはrela……(続きを読む)

 

« Apr 2017 May 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 Jun »