JS and jquery How to get the picture true width and height _javascript tips

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

The code is as follows:

. 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

The code is as follows

var _w = parseint ($ (window). width ());//Gets the browser's breadth $ (". New_mess_c img"). each (function (i) {var img = $ (this); var realwidth;/ /true width var realheight;//true height//here do the following description, $ ("=_w) {$ (IMG). CSS ("width", "100%"). CSS ("height", "Auto");} else{//if the width of the browser is less than the original size of the $ (IMG). CSS ("width", realwidth+ ' px '). CSS ("height", realheight+ ' px ');});});

　　

JS mode

The code is as follows

Window.onload = function () {function getviewsize () {//Get the width 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, depending on the case var imgarray = Document.getel Ementsbytagname ("img"); var realwidth;//true width var realheight;//true height for (var i =0;i=_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!

The above is the cloud Community small series for your carefully prepared content, in the cloud Habitat Community blog, question and answer, the public number, people, courses and other related content, welcome to continue to use the upper right corner search button to search height picture width jquery Gets the true width, jquery gets the true height, jquery Gets the width and height, the jquery gets the height width, and the jquery true height, so you can get more relevant knowledge.

JS and jquery How to get the picture true width and height _javascript tips