Web ページに合わせて iframe のコンテンツを拡大縮小するにはどうすればよいですか?

iframe コンテンツのスケーリング: 総合ガイド

iframe を Web ページに組み込む場合、多くの場合、シームレスに収まるようにサイズを調整する必要があります。ページレイアウト内で。この記事では、iframe のコンテンツを拡大縮小して、元のサイズと比較して適切なサイズで表示できるようにするための詳細なソリューションを提供します。

iframe のコンテンツを拡大縮小するには、次の手法を組み合わせて使用​​します。

1.ラッパー DIV による包含:

特定のディメンションを持つ包含 DIV 内で iframe を囲みます。これにより、iframe が占めることができる全体のサイズが設定されます。

2. CSS 変換:

適切なスケール値を持つ CSS の変換プロパティを使用して、iframe のコンテンツをラッパー DIV の小数サイズにスケールします。

提供された CSS コードは、この実装を示しています。

#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame {
    -ms-zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}

追加調整:

必要な視覚効果に応じて、#frame に overflow: hidden を設定して、オーバーフローするコンテンツを非表示にし、スクロールバーを防止する必要がある場合があります。

以上がWeb ページに合わせて iframe のコンテンツを拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。