Use JavaScript to solve page picture stretch problems

Reprint Please specify source: http://blog.csdn.net/xiaojimanman/article/details/53084716

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

Personal Blog Station has been online, the website www.llwjy.com ~ welcome you to vomit Groove ~

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

Before beginning to play a small ad, you create a QQ group: 321903218, click on the link to join the group "Lucene case Development", mainly used to communicate how to use Lucene to create a site search backstage, but also irregular in the group open the relevant public classes, Interested children's shoes can be added to the exchange.

Problem description

This period of time in the need to do pm suddenly found a problem, the product on the picture from a number of third parties, the specific size can not be determined, if directly in the style of writing dead pictures of the size of the picture will appear in the image stretching phenomenon, very affect the aesthetics of the product, so hope to find a better solution. I did a simple demo to show the problem first.

The above-mentioned situation is still quite influential aesthetics, whether you can consider the dynamic setting of the size of the picture?

Solution Ideas
Whether you can get the picture's true size and the size of the picture container after the browser loads the picture resource, and then dynamically set the width and height properties of the picture.

Get the true size of the picture
HTML5 has provided the appropriate method to return the actual size of the picture (Img.naturalwidth, Img.naturalheight), for IE6/7/8 can also be used in the following ways to obtain the size of the true size
var imgae = new Image (), image.src = Img.src;image.onload = function () {    var w = image.width;    var h = image.height;}
The following will write the corresponding JS method to get the true size of the picture is the size of the picture container
Setimgsize:function (IMG, callback) {if (img.naturalwidth) {//html5callback (img, img.naturalwidth, Img.naturalheight, Img.width, img.height);} else {//IE 6 7 8var imgae = new Image (); image.src = Img.src;image.onload = function () {                   callback (IMG, Image.width, I Mage.height, Img.width, img.height);}}                

Re-set the picture size
After getting the actual size of the picture, we need to reset the size of the image. Here is a simple introduction to the processing target : If the size after setting is larger than the display area, the middle part of the picture is displayed, if the display area is larger than the picture size, the picture is centered. With a simple 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 ways to process the picture, respectively, the upper two (width consistent), the lower two (the height of the same), the right two (full display area), the following describes the three ways:
One, 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.W  Idth = 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 image of the original size of the length and width of the proportion of the container and the length of the relationship between the ratio, if highly affluent, then the image will be moved up a certain number of pixels, if the height is not enough, the picture will move the corresponding pixels, as for the other two cases is the same logic, first look at the effect


Ii. ensure a high level of consistency
Original width original height container width container height//Guaranteed height consistent resetimgsizeh:function (IMG, NW, NH, W, h) {nwh = NW/NH;WH = w/h;if (Nwh > Wh) {img.h  eight = 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;}}


Three, the display area covered
Original width original height container width container height//Covered full screen resetimgsizewh:function (IMG, NW, NH, W, h) {nwh = NW/NH;WH = w/h;if (Nwh > Wh) {img.he ight = 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 simple introduction to the implementation of the logic and the final effect, the following describes how to use.
<!--quote JS script--><script src= "./js/imageload.js" ></script><script>var imageload = new ImageLoad ();//processing all images on the site, the following three types can only use one//imageload.initimg ("w"),//Ensure width consistent//imageload.initimg ("H");//Guaranteed high consistency// Imageload.initimg ("WH");//fill the display area//process a single picture, for more than one 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 ();}); I Mageload = function () {this.init ();};i Mageload.prototype = {init:function () {//this.initimg ("w");},initimg:function (type) {var _this = This;var IMGs = Docu Ment.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.st Yle.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//Covered 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;}},//Gets the true size of the picture and the container size Setimgsize:function (IMG, cAllback) {if (img.naturalwidth) {//html5callback (img, img.naturalwidth, Img.naturalheight, Img.width, img.height);} else {//IE 6 7 8var imgae = new Image (); image.src = Img.src;image.onload = function () {Callback (IMG, IMAGE.W        Idth, Image.height, Img.width, img.height); }}},}

The above code there are a lot of places to optimize, welcome to comment on the message exchange

-------------------------------------------------------------------------------------------------
Small welfare
-------------------------------------------------------------------------------------------------
Individual at the Geek College, "Lucene case development" course has been launched, welcome everyone to spit Groove ~
First lesson: Lucene Overview
Lesson Two: Introduction to Lucene common functions
Lesson Three: web crawler
Lesson Four: Database connection pooling
Lesson Five: Collection of novel websites
Lesson Six: The operation of the novel website database
The seventh lesson: the realization of the novel Web site's distributed crawler
Eighth lesson: Lucene Real-time search
Lesson Nineth: The underlying operation of the index

Use JavaScript to solve page picture stretch problems