JavaScript: getting the size of an image using getComputedStyle()

Question

I am currently experiencing a 'strange problem'... I am a beginner in JavaScript and I want to get the height of an image in order to set the size of a .

I get the width of the screen
I set the width of an image which depend on the screen size => I guess the computer set also the height of the image.
I ask for the height of the image
I print it

This is the code:

var screenWidth = (window.innerWidth);  
myImg.width = Math.floor(screenWidth/3); // That works, my image is sized well.  
var imgLarg = getComputedStyle(myImg,null).height.toLowerCase()  
console.log(imgLarg);

The problem is at follow: When I refresh the page by reloading the page via the web address, it works. But, when I press the refresh button, the code return '0px'.

Please provide some more context, this can't be solved with the information in the post. An important part here is when and where this code is executed. — Teemu
– Teemu, Commented Dec 5, 2013 at 22:54
At this step, the code is very simple, i have simplified it to have a better understanding and the problem still remain. A simple html code with <img src="waves.jpg" alt="photo" id="imag" />. Juste before </html>, there is the js script as before, with this line var myImg = document.querySelector('#imag') at the beginning. In a real situation, i want the get the height of the image to set the size a <div>. I have tried with myImg.onload = function(){} but i experience difficulties... — ApneaDeepBlue
– ApneaDeepBlue, Commented Dec 7, 2013 at 10:48

Lucky Soni · Accepted Answer · 2013-12-05 22:48:54Z

0

wrap your code in document.ready (if you use jquery) or listen for DOMContentLoaded. Wait for the image to load completely before getting its dimensions. Use .load if you use jquery or Image.onload().

http://api.jquery.com/ready/
http://api.jquery.com/load/
http://developer.mozilla.org/En/XUL/Attribute/Onload

edited Dec 5, 2013 at 22:48

answered Dec 5, 2013 at 22:39

Lucky Soni

6,8883 gold badges40 silver badges59 bronze badges

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

5 Comments

Teemu Over a year ago

The timing really can be an issue here, but can't you just give the answer without obtruding jQuery, which is not even tagged in the post.

Lucky Soni Over a year ago

@Teemu i just updated my answer to include information for vanilla javascript. I have tried my best to shed some light in the right direction.

Teemu Over a year ago

Unfortenately DOMContentLoaded or jQuery's $(document).ready() don't wait images to load...

Lucky Soni Over a year ago

@Teemu that is why i have mentioned Image.onload() or .load() :)

gerwitz Over a year ago

FWIW to future readers, I am using the jQuery .load() approach, but often can still find a not-yet-computed size (0px). I'm still looking for a "style computed" event.

Collectives™ on Stack Overflow

JavaScript: getting the size of an image using getComputedStyle()

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related