JS: Image onLoad resize... How to?

Question

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' ????

Does setting style.width = 'auto' and style.height = 'auto' first and then measuring it work? — powerbuoy
– powerbuoy, Commented Apr 10, 2012 at 15:32
put it as <img width="200" height="200" then access with .height — Sully
– Sully, Commented Apr 10, 2012 at 15:32

Sandro · Accepted Answer · 2012-04-10 15:40:57Z

1

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

answered Apr 10, 2012 at 15:40

Sandro

4,7711 gold badge36 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander Pavlov · Accepted Answer · 2012-04-10 15:36:39Z

1

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).

answered Apr 10, 2012 at 15:36

Alexander Pavlov

32.4k5 gold badges71 silver badges95 bronze badges

Collectives™ on Stack Overflow

JS: Image onLoad resize... How to?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related