JavaScript gets the real size sample of a picture

The simplest basic jquery plugin Access tutorial

The code is as follows	Copy Code
var img = $ ("#img_id"); Get my img elem var pic_real_width, Pic_real_height; $ (". attr ("src", $ (IMG). attr ("src")) . Load (function () { Pic_real_width = This.width; Note: $ (this). Width () won't Pic_real_height = This.height; Work for in memory images. });

example, if you think the jquery plugin is large, we can use JS to implement

The code is as follows

Copy Code

function adapt () { var tablewidth = $ ("#imgTable"). width (); Table width var img = new Image (); Img.src =$ (' #imgs '). attr ("src"); var imgwidth = img.width; Picture actual width if (imgwidth<tablewidth) { $ (' #imgs '). attr ("style", "Width:auto"); }else{ $ (' #imgs '). attr ("style", "width:100%"); } } CSS Code <style type= "Text/css" > <!-- img{ Max-width:100%;height:auto; } --> </style>

If you want to get a remote machine picture we can use the following code.

code is as follows

copy code

<title >javascript get the remote picture size </title> <script> var img=null; function S () { if (img) Img.removenode (TRUE); img=document.createelement ("img"); img.style.position= "Absolute"; img.style.visibility= "hidden"; Img.attachevent ("onreadystatechange", ORSC); Img.attachevent ("onerror", OE); Document.body.insertAdjacentElement ("BeforeEnd", IMG); Img.src=inp.value; } Function oe () { alert ("Cant load img"); } Function ORSC () { if (img.readystate!= "complete") return false; Alert (img.offsetheight+ ":" + Img.offsetwidth); } </script> <input id=inp style= "width:400" value= "/images/logo.gif" <button "s ()" > Get </button>