How do js and jquery get the true width and height of the image

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

When doing PC web pages, sometimes consider the size of the inserted image to determine whether the image is horizontal or vertical. Then judge after giving different ways of presentation!

Another is on the mobile page, in the news page inserted in the picture is often according to the full size of the picture to show, if the phone screen is too small, too big picture will be out! There are two solutions

1) add this style to all the pictures

1

.news img{margin:5px auto; display:block;width:100%; height:auto;}

However, another problem with this approach is that if the inserted image itself is small, it will be directly stretched to 100% display, which is obviously unreasonable! So here is another way to introduce the dynamic display image size through js!

2) js dynamically gets the size of the picture

Jquery way

The following code

var _w = parseInt($(window).width());//Gets the width of the browser
$(".new_mess_c img").each(function(i){
var img = $(this);
var realWidth;//True width
var realHeight;//True height
//$("<Img />" ) here is to create a temporary img tag, similar to js to create a new Image() object!
$("<img/>").attr("src", $(img).attr("src")).load(function() {
/*
 If you want to get a picture of True width There are three things about height 
1 Need to create one image Object: as shown here $("<img/>")
2 , of the specified picture src The path 
3 , must be in the picture load after the completion of such as .load() Execute in function 
*/
realWidth = this.width;
realHeight = this.height;
// if True width Larger than the width of the browser 100% According to 
if(realWidth>=_w){
$(img).css("width","100%").css("height","auto");
}
else{//If it is smaller than the width of the browser, display it at full size
$(img).css("width",realWidth+'px').css("height",realHeight+'px');
}
});
});

Js way

The following code

window.onload = function(){
function getViewSize() {//Gets the width and height of the browser viewport
return {
"w": window['innerWidth'] || document.documentElement.clientWidth,
(www.jb51.net) "h": window['innerHeight'] || document.documentElement.clientHeight
}
}
function getFullSize() {//Gets 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, the specific case
var Imgarray = document.getElementsByTagName("img");
var realWidth;//True width
var realHeight;//True height
for(var i =0;i<Imgarray.length;i++){
var imgtemp = new Image();//Create an image object
imgtemp.src = Imgarray[i].src;
imgtemp.index = i;//Specifies a retrieval value to determine which graph it is
imgtemp.onload = function(){//Execute after the image is loaded
var _stemp = this;//Copies the current pointer to a new variable, or it leads to variable sharing
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';
}
}
}
}

Of the two methods above, jquery is simple and fast to implement. The second method is more complex, but faster to execute!