jQ は page_html/css_WEB-ITnose で大きすぎる画像を処理します

これは非常に実用的な機能です。Web ページに一部の大きな画像が表示されることは避けられず、通常は CSS の max-width を使用して制御します。しかし、私はこれが好きではありません。ウェブサイトを構築しているときにこの種の混乱に遭遇しました。最近 jQuery を学習していたので、この問題に対処するために jq を使用することを考えました。少し考えてみると、この問題は難しくないと思います。詳しく説明しましょう:



1. アイデア:

サイズの問題を解決するには、まず画像の幅と高さを取得し、次に最大値を定義します。 width を判断し、実際の幅が設定した最大幅より大きい場合は、実際の幅を最大幅と等しくして、アスペクト比に応じて高さを比例的に縮小することができます。自分の考えを整理して中国語の文章を列挙してみました:

1) 最大幅を設定する
2) 画像の幅を取得する
3) 画像の高さを取得する
4) 高さの比例関係を定義する(新しい高さ = 高さ / 幅* 幅の設定)
5) 幅 > 設定された最大幅かどうかを判断します
6) 幅 = 最大幅; 高さ = 新しい高さ
7) 終了



2. コード:

上記の中国語ステートメントを Complete として書き込みますjQ ステートメント:

$(function() {
$('.content img').each(function() {
var maxWidth = 600;
var width = $(this).width();
var height = $(this).height();
var newHeight = 高さ / 幅 * maxWidth;
if(width > maxWidth) {
$(this).width(maxWidth);
$(this).height(newHeight) ;
}
});
});



Here.content img はセレクターであり、次の構造など、実際の Web ページの構造に従って変更する必要があります:

< ;img src="eyouhome.jpg" width="800" height="600"/>

3. 互換性:



互換性テストは必須です 手順、結局のところ、ブラウザの種類は複雑すぎます。ここで IE6、IE9、Firefox、Chrome でテストしましたが、非常に成功しました!



しかし、画像の幅と高さを最初にコードで取得する必要があるため、思考の問題を制限しすぎることはできません。高さと幅が定義されていない場合でも、それは正常ですか?



毛主席は、真の知識は実践から得られると教えてくれました。もちろん、疑問点は実際にテストすることによってのみ知ることができます。ブラウザが何を知らせるかを確認するために、jq にalert(width); を追加しました。



1) 高さと幅は空です:



この場合、ie6 と ie9 によって取得される実際の幅は次のとおりです。 1 、Firefox は 800、Chrome は 0 を取得します。これは、Firefox のみが正常に実行できることを意味します。



2) 高さと幅の属性なし:



この場合、ie6、ie9、Firefox は値 800 を取得し、chrome は 0 を取得します。 ie9 と Firefox は正常ですが、常に人々に賞賛されてきた Chrome が失敗したのは少し残念です。



この観点から、Web サイトを設計するときは、前の JQ を使用して画像のサイズを制御する前に、画像の高さと幅の属性を正しく追加する必要があります。







4. 関数拡張:



さて、前のコードはすでに特大の画像を制御できるので、これをベースにいくつかの拡張を作成しましょう。

1)、サイズが大きすぎる場合は、CSS クラスを画像に追加します:

$(this).addClass("bigpic");

2)、サイズが大きすぎる場合は、画像の CSS を設定します画像:

$(this ).css("cursor","pointer");

3)、サイズが大きすぎる場合は、画像の属性を設定します:

$(this).attr("title ","クリックして拡大");

4 )、サイズが大きすぎる場合は、クリックして元の画像を新しいウィンドウで開きます:

$(this).click(function(){window.open( this.src)});

など...必要に応じてさらに追加しました。