Images based on jQuery are not automatically reduced in proportion_javascript skills

For example

First case: For example, the image size is 600×350 and the display area size is 200×140. If the image is scaled according to the target width (200) and the size becomes 116, then it will be very difficult to display at 200×140. Ugly. As shown below on the left

Second case: Just the opposite. If the picture size is 400×400, the display area is also 200×140. If the picture is scaled according to the target height (140), the size becomes 140, that is, 140×140, the same Ugly. As shown below on the right

At this time, it is slightly better to use jQuery to get the image size and then judge and process it: in the first case, the width is calculated as 140×600/350=240 based on the height, and then the image is displayed as 240×140, and the excess part is used with css overflow:hidden Hide.

The following is my processing method: (Note - what is mentioned here is when the width and height of the original image are larger than the size of the target display box - so it is called reduction)

Demo 》Here

Html part

If the class of the display area is thumbnail

Copy code The code is as follows:

845bc0347d2f48a149098cc22d7a5f95
1adb1093646f2b3555a7eb390c8a2671445ddb556d0944779176d0c2a02ed6a316b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

css part

Copy code The code is as follows:

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

jQuery part

1. Of course, you need to install the jQuery library first. How to install Google and Baidu yourself?
2. Core code

jQuery(document).ready(function(){
/* 图片不完全按比例自动缩小 by zwwooooo */
  $(window).load(function(){
	$('#content div.thumbnail img').each(function(){
		var x = 200; //填入目标图片宽度
		var y = 140; //填入目标图片高度
		var w=$(this).width(), h=$(this).height();//获取图片宽度、高度
		if (w > x) { //图片宽度大于目标宽度时
			var w_original=w, h_original=h;
			h = h * (x / w); //根据目标宽度按比例算出高度
			w = x; //宽度等于预定宽度
			if (h < y) { //如果按比例缩小后的高度小于预定高度时
				w = w_original * (y / h_original); //按目标高度重新计算宽度
				h = y; //高度等于预定高度
			}
		}
		$(this).attr({width:w,height:h});
	});
  });
});

Applicable places: Fixed size image display area, such as thumbnails.

Finished.

The following is a recommended image size control code commonly used in content pages:

<script type="text/javascript">
$(window).load(function() {  
  $(".cont img").each( function() {
 var maxwidth = 800;
 if ($(this).width() > maxwidth) {
  $(this).width(maxwidth);
 }
}); 
}); 
</script>

There is no need to explain the code. There are two things worth noting:

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

Use $(window).load to declare the event, but cannot use $(document).ready.
I saw related articles on Baidu and iteye websites, and the methods are all wrong. Doesn't work at all.

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

Here is .each( function() { .... }), where each calls the following methods one by one on the specified image collection object.

This method is compatible with most browsers and the effect is very convenient.

Personally, I feel that this method is more convenient. In addition, it can be expanded to a thumbnail control method.