ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります。iframe 要素の width 属性と height 属性は、その幅と高さを設定しますが、包含ブロックの幅または高さが iframe の幅または高さよりも小さい場合、iframe 要素はオーバーフローします。

このようなオーバーフローした iframe はページのレイアウトを破壊します。 iframe 要素をレスポンシブにする方法も見つかると思いますので、お楽しみに。

回避策
iframe 要素自体は、その幅が js 経由で明示的に設定されない限り、伸縮できません。ただし、iframe を iframe-container 要素でラップし、iframe-container 要素の幅を包含ブロックの幅に合わせて、iframe のアスペクト比に応じて iframe-container 要素の padding-bottom パーセンテージを設定することができます。

実際、この方法の本質は、iframe-container 要素の padding-bottom 属性を設定することにあります。この属性を設定する目的は、要素の高さを偽装して設定することです。 padding-bottom のパーセンテージ設定は、親要素の幅を基準にするためです。height 属性にパーセンテージを設定すると、親要素の高さを基準に設定されます。通常、親要素の高さの値にはデフォルトの auto を使用するため、子要素の高さも 0 になります。そのため、padding-bottom にのみ属性を設定できます。この方法では、iframe 要素が iframe コンテナーを埋めるようにします。

結果にはステータスが表示されます:

ビューポートの幅が 400 ピクセルより大きい場合:

ビューポートの幅が 400 ピクセル未満の場合:

まとめ<br />以上がこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。ご質問があれば、メッセージを残してご連絡ください。