jQuery: The image is not automatically reduced in proportion_html/css_WEB-ITnose

Sometimes we have the need to display images in a fixed size area. If you don't consider IE6, you can use the max-width limit of CSS to automatically scale down the display. However, there is a problem with this. If the height of the picture is not enough after scaling down, it will be ugly.

For example

The first case: if 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), the size becomes If it is 116, it will be ugly when displayed at 200×140. As shown on the left in the picture below

The 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, which is equally ugly. As shown on the right in the picture below

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 based on the height of 140, and then The image is displayed at 240×140, and the excess part is hidden using CSS overflow:hidden.

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 target display box size?? That’s why it is called reduction)

Html part

If the class of the display area is thumbnail

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

css part

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

jQuery part

1. Of course. Let’s hang the jQuery library first. How to hang it on Google and Baidu?

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.

Reprinted from: http://zww.me/archivesd/25474