jquery-based images are not fully scaled to automatically shrink _javascript skills

For example

The first case: if the picture size is 600x350, the display area size is 200x140, if the picture according to the target width (200) proportionally scales after the size becomes 116, then displays in 200x140 will be very difficult to see. The following figure left

The second case: just the opposite, if the picture size is 400x400, the display area is also 200x140, if the picture according to the target height (140) proportional scaling after the size of 140, that is 140x140, equally ugly. The following figure right

Then use JQuery to get the picture size and then judge the processing is slightly better: as the first case by 140 height to calculate the width of 140x600/350=240, and then the picture according to 240x140 display, redundant parts with CSS Overflow:hidden hidden.

Here's how I do it: (note-here is the original picture is larger than the size of the target display box--so it's called narrowing)

Demo "Here

Html section

If the display area's class is thumbnail

Copy Code code as follows:

<div id= "Content" >
<div class= "thumbnail" ></div>"
</div>

CSS Section

Copy Code code as follows:

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

JQuery section

1. Of course, the first to hang JQuery library, how to hang their own Google, Baidu
2. Core code

JQuery (document). Ready (function () {/
* Picture not fully scaled automatically by zwwooooo * * * *
  (window). Load (function () {
	$ (' # Content div.thumbnail img '). each (function () {
		var x = 200;//fill in target picture width
		var y = 140;//fill in target picture height
		var w=$ (this). WI
			H = h * (x/w); Calculate the height by proportional to the target width
			w = x;//width equal to the predetermined width if
			(H < y) {//If the height is smaller than the predetermined height when scaled proportionally
				w = w_original * (y/h_original); /recalculate width by target height
				h = y;//height equals predetermined height
			}
		$ (this). attr ({width:w,height:h});
	}
);};

Applicable place: A fixed size picture display area, such as thumbnails.

Toss it out.

The following is recommended for a content page in the common picture size control code:

<script type= "Text/javascript" >
$ (window). Load (function () {  
  $ (. cont img). Each (function () {
 var MaxWidth = A;
 if ($ (this). Width () > MaxWidth) {
  $ (this). Width (maxwidth);
 }
} 
); </script>

The code doesn't have to be explained, it's worth noting that there are two places:

First: $ (window). Load (function () {

The part that declares the event uses $ (window). Load, cannot use $ (document). Ready.
I am in Baidu and Iteye website to see related articles, the method is wrong. It doesn't work at all.

Second: $ (". Cont img"). each (function ()

Here is a. each (function () {...}) where each calls the following method for the specified picture collection object.

This approach is compatible with most browsers and is also very efficient.

Personal feeling this method is more convenient, in addition, can be extended to the thumbnail control method.