レスポンシブWebデザインでiframe要素のサイズ比率を維持した状態で縮小させる方法を紹介します。 (1) iframe要素にdiv要素(親)を囲む (2) 親、iframe要素にpositionプロパティを指定、親にはrelative、iframe要素にはabsolute (3) 親の要素にpadding-topプロパティ(bottomでも可)に画面比率を算出して指定 ※画面比率の算出方法 16:9の場合(横幅は100%) 100 / 16 9 = 56.25% 4:3の場合(横幅は100%) 100 / 4 3 = 75% デモ(リンク) ※デモは4:3の場合です。 CSS .iframe-content { position: relative; width: 100%; padding: 75% 0 0 0; } .iframe-content iframe { position
![iframe要素のレスポンシブWebデザイン対応 | Tips Note by TAM](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0808a46a6d15f4beb95cc6e201f12bd76d8f4cc/height=288;version=1;width=512/https%3A%2F%2Fwww.tam-tam.co.jp%2Ftipsnote%2Fwpdata%2Fwp-content%2Fuploads%2F2014%2F04%2Fhtml-1024x538.png)