Use JavaScript to solve web picture stretching problems __java

Reprint please indicate the source: http://blog.csdn.net/xiaojimanman/article/details/53084716

Http://www.llwjy.com/blogdetail/92b85d1cdb0343a7bd6d8dd0868c0f82.html

Personal Blog Station has been online, the Web site www.llwjy.com ~ welcome you to spit out the groove ~

-------------------------------------------------------------------------------------------------

Before starting a small ad, create a QQ group: 321903218, click on the link to join the group "Lucene case Development", mainly used to exchange how to use Lucene to create site search background, but also at irregular intervals in the group open the relevant open class, Interested children's shoes can be added to the exchange.

Problem Description

This period of time in the need to do the PM when suddenly found a problem, products on the image from a number of third parties, the specific size can not be determined, if directly in the style of the image of the size of the picture will appear tensile phenomenon, very affected the beauty of the product, so hope to find a better solution. I first made a simple demo to show the problem.

 

 

 


This kind of situation still quite affects beautiful, whether can consider the dynamic setting picture size.



Solving Ideas

If you can load the picture resource in the browser, get the real size of the picture and the size of the picture container, and then dynamically set the width and height property of the picture.



get the real size of a picture

HTML5 has provided an appropriate way to return the real size of the picture (Img.naturalwidth, Img.naturalheight), and for IE6/7/8 you can also get the size of the real size by the following methods


var imgae = new Image ();
		IMAGE.SRC = IMG.SRC;
		Image.onload = function () {
	    	var w = image.width;
	    	var h = image.height;
}
 
The following is to write the corresponding JS method to get the picture of the real size of the picture container size


Setimgsize:function (IMG, callback) {
	if (img.naturalwidth) {//HTML5
		callback (IMG, Img.naturalwidth, Img.naturalheight, Img.width, img.height);
	else {//IE 6 7 8
		var imgae = new Image ();
		IMAGE.SRC = IMG.SRC;
		Image.onload = function () {
                   callback (IMG, Image.width, Image.height, Img.width, img.height);}}}
 

 
Reset Picture Size

After getting the real size of the picture already container size, we need to reset the size of the picture. Here is a simple introduction to the processing of the target : If the size of the set after the display area, then show the middle part of the picture, if the display area is larger than the picture size, the picture center display. With the illustration, the black solid line is the display area of the picture, and the green part is the size of the picture.




Below we provide three methods to deal with the picture, respectively, to achieve the upper two (width consistent), the lower two (highly consistent), the right two (full display area), the following are described in the three ways:

one, to ensure the width of the same


Original width original height container width container height
//Guaranteed width consistent
resetimgsizew:function (IMG, NW, NH, W, h) {
	nwh = NW/NH;
	WH = w/h;
	if (Nwh > Wh) {
		img.width = w;
		var height = parseint (1/NWH * w);
		img.height = height;
		var top = parseint ((h-height)/2);
		Img.style.marginTop = top + "px";
	} else if (NWH < WH) {
		img.width = w;
		var height = parseint (1/NWH * w);
		img.height = height;
		var top = parseint ((height-h)/2) *-1;
		Img.style.marginTop = top + "px";
	} else {
		img.height = h;
		Img.width = w;
	}
,
 



Here we need to determine the relationship between the length of the original size of the picture and the ratio of the length to the width of the container, if highly affluent, then the picture to move up a certain pixel, if the height is insufficient, the picture down to move the corresponding pixel, as for the other two situations is the same logic, first look at the following processing effect:





Ii. ensure a high degree of consistency


Original width original height container width container height
//Ensure highly consistent
resetimgsizeh:function (IMG, NW, NH, W, h) {
	nwh = NW/NH;
	WH = w/h;
	if (Nwh > Wh) {
		img.height = h;
		var width = parseint (NWH * h);
		Img.width = width;
		var left = parseint ((width-w)/2) *-1;
		Img.style.marginLeft = left + "px";
	} else if (NWH < WH) {
		img.height = h;
		var width = parseint (NWH * h);
		Img.width = width;
		var left = parseint ((w-width)/2);
		Img.style.marginLeft = left + "px";
	} else {
		img.height = h;
		Img.width = w;
	}
}
 

 

 
third, covered with display area



Original width original height container width container height
//Full screen
resetimgsizewh:function (IMG, NW, NH, W, h) {
	nwh = NW/NH;
	WH = w/h;
	if (Nwh > Wh) {
		img.height = h;
		var width = parseint (NWH * h);
		Img.width = width;
		var left = parseint ((width-w)/2) *-1;
		Img.style.marginLeft = left + "px";
	} else if (NWH < WH) {
		img.width = w;
		var height = parseint (1/NWH * w);
		img.height = height;
		var top = parseint ((height-h)/2) *-1;
		Img.style.marginTop = top + "px";
	} else {
		img.height = h;
		Img.width = w;
	}
,
 

 

 


How to use JS

The above is a brief introduction to the logic of implementation and the final effect, and here is how to use it.


<!--refer to the JS script-->
<script src= "./js/imageload.js" ></script>
<script>
	var Imageload = new Imageload ();
	To handle all the pictures on the website, the following three types can only use one
	//imageload.initimg ("w");//Guaranteed width consistent
	//imageload.initimg ("H");//ensure high consistency
	Imageload.initimg ("WH"),//Full display area
	//Process a single picture, for multiple themselves can write loop statements to implement
	imageload.setimgsize ( document.getElementById ("Img1"), Imageload.resetimgsizew);
	Imageload.setimgsize (document.getElementById ("Img2"), Imageload.resetimgsizew);
	Imageload.setimgsize (document.getElementById ("Img3"), Imageload.resetimgsizeh);
	Imageload.setimgsize (document.getElementById ("Img4"), Imageload.resetimgsizeh);
	Imageload.setimgsize (document.getElementById ("Img5"), IMAGELOAD.RESETIMGSIZEWH);
	Imageload.setimgsize (document.getElementById ("Img6"), IMAGELOAD.RESETIMGSIZEWH);
</script>
 


Imageload Source


$ (document). Ready (function () {new Imageload ();});

Imageload = function () {this.init ();};
	Imageload.prototype = {Init:function () {//This.initimg ("w");
		}, Initimg:function (type) {var _this = this;
		var IMGs = document.getelementsbytagname (' img ');
				for (var i=0 i Wh) {img.height = h;
			var width = parseint (NWH * h);
			Img.width = width;
			var left = parseint ((width-w)/2) *-1;
		Img.style.marginLeft = left + "px";
			else if (NWH < wh) {img.height = h;var width = parseint (NWH * h);
			Img.width = width;
			var left = parseint ((w-width)/2);
		Img.style.marginLeft = left + "px";
			else {img.height = h;
		Img.width = W;
		},///original width original height container width container height//Guaranteed width consistent resetimgsizew:function (IMG, NW, NH, W, h) {nwh = NW/NH;
		WH = w/h;
			if (Nwh > Wh) {img.width = W;
			var height = parseint (1/NWH * W);
			Img.height = height;
			var top = parseint ((h-height)/2);
		Img.style.marginTop = top + "px";
			else if (NWH < wh) {img.width = W;
			var height = parseint (1/NWH * W);
			Img.height = height;
			var top = parseint ((height-h)/2) *-1;
		Img.style.marginTop = top + "px";
			else {img.height = h;
		Img.width = W;
		},///original width original height container width container height//Full Screen Resetimgsizewh:function (IMG, NW, NH, W, h) {nwh = NW/NH;
		WH = w/h;
			if (Nwh > Wh) {img.height = h;
			var width = parseint (NWH * h);
			Img.width = width;
			var left = parseint ((width-w)/2) *-1; Img.style.marginLEFT = left + "px";
			else if (NWH < wh) {img.width = W;
			var height = parseint (1/NWH * W);
			Img.height = height;
			var top = parseint ((height-h)/2) *-1;
		Img.style.marginTop = top + "px";
			else {img.height = h;
		Img.width = W; },//Get picture real size and container size Setimgsize:function (IMG, callback) {if (img.naturalwidth) {//HTML5 callback (IMG, Img.nat
		Uralwidth, Img.naturalheight, Img.width, img.height);
			else {//IE 6 7 8 var imgae = new Image ();
			IMAGE.SRC = IMG.SRC;
	        Image.onload = function () {Callback (IMG, Image.width, Image.height, Img.width, img.height); }
		}
	},
}
 

The above code also has many can optimize the place, welcome everybody in the comment area message exchange


-------------------------------------------------------------------------------------------------
Small welfare
-------------------------------------------------------------------------------------------------
The individual in the Geek College "Lucene case Development" course has been online, welcome everyone to spit out the groove ~

First lesson: Lucene Overview

The second lesson: Lucene Common Function Introduction

Lesson Three: web crawler

Lesson Four: Database connection pool

Lesson Five: Collection of novel websites

Lesson Six: A novel website database operation

The seventh lesson: the realization of the novel website distributed crawler

Lesson Eighth: Lucene Real-time search

Lesson Nineth: Basic Operations for indexing