How to get the true width and height of a picture via JS and jquery

Text: How to get the true width and height of a picture via JS and jquery

1. When to get the true width and height of the picture

When doing a PC Web page, sometimes consider the size of the inserted image to determine whether the picture is a horizontal or vertical graph. Then the judgment is given a different way of showing!

Another is in the mobile phone page, in the news page inserted images are often in accordance with the original size of the picture to show, if the phone screen is too small, too large map will go beyond! There are two ways to solve this.

1) Add such a style to all the pictures

. News img {margin:5px auto; Display:block; width:100%; Height:auto;}

But the other problem with this approach is that if the inserted image itself is very small, it will also be stretched directly to 100% display, which is obviously unreasonable! Then here is another way is to show the size of the image by JS Dynamic!

2) JS dynamic capture the size of the picture

jquery Way

var _w = parseint ($ (window). width ());//Get browser widths
$ (". New_mess_c img"). each (function(i) {varIMG = $ ( This); varRealwidth;//the true width        varRealheight;//the true height
Here to do the following instructions, $ ("$ ("function() {
/*
If you want to get the true width and height of the picture there are three points to note
1, you need to create an image object: As here, $ ("2, the SRC path of the specified picture
3. Be sure to execute after the picture is loaded, as in the. Load () function
*/
Realwidth= This. Width; Realheight= This. Height;
If the true width is greater than the width of the browser, it is displayed as 100%if(Realwidth>=_w) {$ (IMG). CSS ("width", "100%"). CSS ("height", "Auto"); }                    Else{//If the width is less than the browser, the $ (IMG) is displayed in the original size. CSS ("Width",Realwidth+ ' px '). CSS ("height",Realheight+ ' px ');    }            }); });

JS mode

Window.onload = function () {
function Getviewsize () {//Get the width height of the browser viewport
return {
"W": window[' innerwidth ' | | Document.documentElement.clientWidth,
"H": window[' innerheight ' | | Document.documentElement.clientHeight
}
}
function Getfullsize () {//Get the maximum width of the browser
var w = Math.max (Document.documentElement.clientWidth, document.body.clientWidth) +
Math.max (Document.documentElement.scrollLeft, document.body.scrollLeft);
var h = Math.max (Document.documentElement.clientHeight, document.body.clientHeight) +
Math.max (Document.documentElement.scrollTop, Document.body.scrollTop);
W = Math.max (Document.documentElement.scrollWidth, W);
h = Math.max (Document.documentElement.scrollHeight, h);
return {
"W": W,
"H": H
};
}
var _sv_w = getviewsize () ["w"];
var _sf_w = getfullsize () ["w"];
var _w = _sv_w;//Here with the width of the viewport, depending on the situation
var Imgarray = document.getelementsbytagname ("img");
var realwidth;//the true width
var realheight;//the true height
for (var i =0;ivar imgtemp = new Image ();//Create an Image object
IMGTEMP.SRC = IMGARRAY[I].SRC;
Imgtemp.index = i;//Specifies a retrieval value that determines which graph
Imgtemp.onload = function () {//Picture is executed after loading complete
var _stemp = this;//Copies the current pointer to a new variable, otherwise it causes the variable to be shared
Realwidth = This.width;
Realheight = This.height;
if (Realwidth >=_w)
{
Imgarray[_stemp.index].style.width = _w+ ' px ';
imgarray[_stemp.index].style.height = ' auto ';
}
else{
Imgarray[_stemp.index].style.width = realwidth+ ' px ';
Imgarray[_stemp.index].style.height = realheight+ ' px ';
}
}
}
}

The above two methods of jquery are relatively simple, the implementation of the faster, the second is more complex, but the implementation is faster than jquery!

How to get the true width and height of a picture via JS and jquery