ページをレイアウトするとき、特に外部リンク画像 (通常は外部サイトから収集した画像) を読み込むときに、大きな画像がページ コンテナを「壊す」状況に遭遇することがあります。そこでこの記事では、jQuery を使用して大きな画像を比例的に拡大縮小し、ページ レイアウトに適応させる方法について説明します。
通常、サムネイルを処理するときは、バックエンド コード (PHP、.net、Java など) を使用して、フロントエンド ページが呼び出すための大きな画像に基づいて特定のサイズのサムネイルを生成します。もちろん、サムネイルをロードするためにフロントエンドの JavaScript スクリプトも使用します。いわゆるサムネイルに大きな画像を強制的にズームすることはお勧めできません。ただし、この Web サイトの記事詳細ページなどの Web サイト コンテンツ ページでは、大きな画像を読み込む必要がある場合、レイアウトの「破壊」を防ぐために、jQuery を使用して画像を比例的に拡大縮小します。これについては 2 つの状況で説明します。
1. 既知の画像サイズ
;
ページにロードされた画像に幅と高さの属性値が含まれている場合、いくつかの単純な jQuery コードを使用して均等なスケーリングを実現できます。
$(function(){
var w = $("#demo1").width();//コンテナ幅
$("#demo1 img").each(function(){//画像が多い場合は each( ) トラバース
var img_w = $(this).width();//画像の幅
var img_h = $(this).height();//画像の高さ
if(img_w> w){//画像の幅がコンテナの幅を超えている場合、バーストします
var height = (w*img_h)/img_w; //高さのスケーリング
$(this).css({"width ":w,"height" :height});//スケーリング後の幅と高さを設定します
}
});
});
2. 不明な画像size
ページにロードされる画像のサイズが不明な場合、上記のコードは効果的に拡大縮小することができません。この状況は、収集された外部リンク画像でよく発生します。
ありがたいことに、特別なプラグインを作成してくれました。クロスブラウザなので、フロントエンドの友人にとって大きな問題が解決されます。
以下は autoIMG の壮大な紹介です。
autoIMG は、ブラウザを使用して、画像のロードを待たずに画像ファイルのヘッダー サイズ データを取得します。
autoIMG は以下と互換性があります: Chrome | Sifari | IE7 |
autoIMG プラグインを呼び出す方法は非常に簡単です。
$(function(){
$(" #demo2").autoIMG();
});
autoIMG インスタンスのダウンロード
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
