jQuery:画像が自動的に比例して縮小されない_html/css_WEB-ITnose

固定サイズの領域に写真を表示する必要がある場合があります。 IE6を考慮しない場合は、CSSの最大幅制限を利用して自動的に表示を縮小することもできますが、これでは縮小後の画像の高さが足りない場合に問題が発生します。醜い。

例

最初のケース: 画像サイズが 600×350、表示領域サイズが 200×140 の場合、画像をターゲット幅 (200) に従って拡大縮小すると、サイズは 116 になります。 200×140で表示すると見苦しくなります。下の図の左側に示すように

2 番目のケース: ちょうど逆で、画像サイズが 400×400 の場合、画像がターゲットの高さ (140) に従って拡大縮小されると、表示領域も 200×140 になります。サイズは 140、つまり 140×140 になり、同様に醜くなります。下の図の右側に示すように

このとき、jQuery を使用して画像サイズを取得し、それを判断して処理する方が少し良いです。最初のケースでは、幅は 140×600/ として計算されます。高さ140を基準に350=240とすると、画像は240×140で表示されるので冗長になりますが、一部をCSSのoverflow:hiddenで非表示にしています。

以下は私の処理方法です: (注 - ここで言うことは、元の画像の幅と高さがターゲットの表示ボックスのサイズよりも大きい場合です?? それが縮小と呼ばれる理由です)

Htmlパート

表示領域のクラスの場合 サムネイル用

css パート

<div id="content">	<div class="thumbnail"><img src="" alt="" /></div></div>

jQuery パート

1. もちろん、最初に jQuery ライブラリをハングします。Google、Baidu

コア コード 2.

.thumbnail{overflow:hidden;width:200px;height:140px;}

適用場所：サムネイルなどの固定サイズの画像表示領域。

完成しました。

転載元: http://zww.me/archivesd/25474