CODEWITHSUNDEEP
javascripthtml
nkuhta
nkuhta

Reputation: 11128

JS: Image onLoad resize... How to?

JavaScript. I want to create simple script, that will be resize loaded image using css width and height. Here is code example:

       <img style="width:200px; height:200px" 
src="http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png" onLoad="    
    //need resize code here
    "/>​

I'm trying to resize image with original size ratio. But I can't access original size. When I want to select original size by this.height it gives me css size. And where to find original value? And how to change size? this.style.height = '200px' ????

Upvotes: 1

Views: 1369

Answers (2)

Sandro
Sandro

Reputation: 4771

How about using max-width and max-height in the CSS instead?

<img style="max-width:200px; max-height:200px" src="http://doc.jsfiddle.net/_downloads/jsfiddle-desktop-1440x900-a.png"/>​

jsFiddle example

Upvotes: 1

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

Have a look at this fiddle. The only issue is that the naturalWidth/Height properties are not supported by Opera and IE < version 9 (according to dottoro).

Upvotes: 1

Related Questions