Home > Web Front-end > HTML Tutorial > jQuery: The image is not automatically reduced in proportion_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:39:08
Original
1178 people have browsed it

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>
Copy after login

css part

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

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});	});    });});
Copy after login

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

Finished.

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template