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

埋め込まれた iframe のコンテンツのスケーリング

Web ページに iframe を組み込むと、メイン ページを離れることなく外部コンテンツを表示できます。ただし、プレゼンテーションを最適化するには、埋め込みコンテンツのサイズの調整が必要になる場合があります。

解決策:

Kip が提案するアプローチでは、iframe 内のコンテンツを効果的にスケーリングできます。 Opera や Safari などのブラウザ。彼のソリューションを実装するために更新された 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;
}

この CSS は、#wrap 要素と #frame 要素のプロパティを変更して、iframe の全体的なサイズと表示を制御します。変換スケール 0.75 を指定すると、iframe 内のコンテンツは縦横比を維持したまま、元のサイズの 80% に縮小されます。

iframe 内にスクロールバーが表示されないようにするには、次のこともできます。 #frame CSS 宣言に overflow: hidden を追加します。

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