Web サイトに完全にフィットするように iframe コンテンツを拡大縮小するにはどうすればよいですか?

最適な表示のための Iframe コンテンツのスケーリング

Web サイトに iframe を統合すると、外部コンテンツを表示できるようになり、ユーザー エクスペリエンスが向上します。ただし、ページ内にシームレスに収まるようにフレーム付きコンテンツのサイズを変更するのは難しい場合があります。

これに対処するための効果的な解決策の 1 つは、CSS 変換を使用することです。次のコード サンプルは、iframe のコンテンツ (この場合は HTML ページ) を元のサイズの 80% に拡大縮小する方法を示しています。

<style>
    #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;
    }
</style>

ID が " の div 要素内で iframe を囲みます。 「wrap」を使用すると、その寸法を指定し、スクロールバーが表示されないようにすることができます。 CSS 変換を iframe 自体に追加すると、コンテンツは元のサイズの 75% に縮小されます。

特定のレイアウトに合わせて「ラップ」 div のサイズを調整する必要がある場合があることに注意してください。さらに、「frame」div で「overflow: hidden」を指定すると、必要に応じてスクロールバーを非表示にするのに役立ちます。

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