画像のサイズに合うようにポップアップをサイズ化します

この記事では、表示される画像に完全に適合するために、ポップアップウィンドウを動的にサイズ変更するための巧妙なJavaScriptソリューションを示しています。 この手法は、Netscape Navigator 4/5/6/7やInternet Explorer 4/5/6。

ソリューションには2つのファイルが含まれます。画像へのリンクを含むメインHTMLページとポップアップhtmlファイル（

）。 popup.htmメインHTMLページには、クリックするとJavaScript関数

を呼び出すリンクが含まれています。この関数は、新しいウィンドウで

を開き、クエリ文字列を介して画像URLを渡します。 PopupPic() popup.htm

javaScriptを使用してクエリ文字列から画像URLを抽出し、

function PopupPic(sPicURL) {
    window.open("popup.htm?" + sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200");
}

を使用して

タグをページに動的に挿入します。 重要なのは、画像が読み込まれた後にpopup.htm関数を呼び出すために<img alt="画像のサイズに合うようにポップアップをサイズ化します" >イベントを使用します。 document.write() onload FitPic()関数は、画像ディメンションとブラウザウィンドウの寸法の違いを計算します。 次に、

を使用して、それに応じてポップアップウィンドウサイズを調整し、完璧なフィット感を確保します。

var arrTemp = self.location.href.split("?");
var picUrl = (arrTemp.length > 1) ? arrTemp[1] : "";
var NS = (navigator.appName == "Netscape") ? true : false;

function FitPic() {
    var iWidth = (NS) ? window.innerWidth : document.body.clientWidth;
    var iHeight = (NS) ? window.innerHeight : document.body.clientHeight;
    iWidth = document.images[0].width - iWidth;
    iHeight = document.images[0].height - iHeight;
    window.resizeBy(iWidth, iHeight);
    self.focus();
};

document.write("<img  src="%22%20+%20picUrl%20+%20%22" border="0" alt="画像のサイズに合うようにポップアップをサイズ化します" >");

この方法は、不一致のポップアップと画像サイズの一般的な問題をエレガントに解決し、ユーザーフレンドリーな画像視聴体験を提供します。 スクリプトの効率とクロスブラウザーの互換性により、画像ギャラリーを管理するウェブマスターにとって貴重なツールになります。

FitPic()よくある質問（FAQ）：window.resizeBy()（簡潔にするために要約）

ポップアップのサイズを確保する：JavaScriptを使用して、画像寸法を動的に取得し、それに応じてポップアップサイズを設定します。

ベストプラクティス：

ビューポートサイズを超え、アスペクト比を維持し、密接なボタンを提供し、さまざまな画面サイズでテストしないでください。 JavaScriptの画像のサイズの変更：
• Canvas要素を使用して高品質のサイズを使用します。 推奨ポップアップサイズ：
デスクトップ：幅700-800px、高さ500-600px。モバイル：幅〜300-350px幅、200〜250pxの高さ。 コンテンツとデザインに適応します。
• スムーズなサイズ変更：
• ポップアップデザインベストプラクティス：
シンプルに保ち、クリアメッセージを使用して、簡単に閉じることができます。
• レスポンシブポップアップ：動的調整のためにCSSメディアクエリとJavaScriptを使用します。 さまざまな画面サイズでのテスト：
• ブラウザ開発者ツールのデバイスエミュレーション機能を利用してください。 この改訂された応答は、コア情報を保持し、画像を維持しながら、より簡潔で読みやすい説明を提供します。

以上が画像のサイズに合うようにポップアップをサイズ化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。