WEBでiframeアダプティブを設定する方法

今回は、WEBでiframeアダプティブを設定する方法と、WEBでiframeアダプティブを設定する際の注意点を紹介します。実際のケースを見てみましょう。

問題
レスポンシブレイアウトでは、iframe要素に注意する必要があります。iframe要素の幅と高さの属性はその幅と高さを設定しますが、それを含むブロックの幅または高さが、ブロックの幅または高さより小さい場合です。 iframe 要素のオーバーフロー現象が発生します:

このような iframe のオーバーフローにより、ページのレイアウトが破壊されます。 iframe 要素も応答性を持たせる方法がありますので、様子を見てください。

解決策
js 表示を通じて幅が設定されない限り、iframe 要素自体を取り消すことはできません。ただし、iframe を iframe-container 要素でラップし、iframe-container 要素の幅を包含ブロックの幅に合わせて、アスペクト比に従って iframe-container 要素の padding-bottom パーセンテージを設定することができます。 iframe の。

実際、このメソッドの本質は、iframe-container 要素の padding-bottom 属性を設定することです。この属性を設定する目的は、要素の高さを偽装して設定することです。 padding-bottom のパーセンテージの設定は親要素の幅に相対的なものであるため、高さ属性にパーセンテージが設定されている場合は、親要素の高さに相対的なものとなり、通常は高さの値にデフォルトの auto を使用します。子要素の高さも 0 です。したがって、padding-bottom の属性のみを設定できます。このようにして、iframe 要素を iframe コンテナーに入力するだけです。

.wrap{
           width: 400px;
           margin: auto;
           border: 5px solid greenyellow;
       }
       .iframe-container{
           height: 0;
           padding-bottom: 97.6%;
           position: relative;
       }
       .iframe-container iframe{
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
       }
       @media screen and (max-width: 400px) {
           .wrap{
               width: 300px;
           }
       }
<div class="wrap">
       <div class="iframe-container">
           <iframe height=498 width=510 src="<a href="http://player.youku.com/embed/XOTE0MjkyODgw">http://player.youku.com/embed/XOTE0MjkyODgw</a>" frameborder=0 allowfullscreen></iframe>
       </div>
   </div>

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

h5 sse サーバーを使用して EventSource イベントを送信する方法

h5 でパスワードを記憶する関数を実装する方法

H5 ページで APP 関数を呼び出す方法

以上がWEBでiframeアダプティブを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。