Catch the height of an image

Asked

Viewed 768 times

0

In my project, I have an image that as the screen goes down 1000px, 860px, 320px, etc the image also changes its height.

How to do to catch the height at the time of display?

I need to know this time to set the margin-top of a div that goes below her.

jquery css css3

1 answer

1

Two alternatives, using .getBoundingClientRect and getComputedStyle.

var img = document.querySelector('img');
var altura = img.getBoundingClientRect().height;
var altura2 = window.getComputedStyle(img).height;
console.log(altura, altura2);

jsFiddle: https://jsfiddle.net/s7u41sg3/

In practice the ideal is to have the element cached with var img = document... and then when you need to know the dimensions use one of the options above. If you explain better how you change the size of the images you have I can give a more complete/adapted example.

  • with Jquery some way out?

  • @Carlosrocha ... the less jQuery the better. Yes, there is a way with jQuery: var altura = $('img').height();

  • That’s the problem. The height is very high when we reduce the resolution. Although the image appears correctly the height information is wrong, See http://hotplateprensas.com.br/new/

  • in localhost, is returning 88 with the browser open at most. On the web gives 0px; When I decrease the resolution to 350px then local gives 9723px and on the web gives 0 also.

  • how to implement var img = Document.querySelector('img'); with image id?

  • tried so Alert($("#logo").innerheight());, gave the same thing

  • I did so highLogo = $("#logo"). innerheight(); Alert(highLogo); $(".top"). css("height", highLogo+" !Mportant"); The inspector says the height is 110,531, already in Jquery says it is 147

  • @Carlosrocha jQuery uses the getBoundingClientRect. For me it shows the same in inpetor and console. Which browser are you using?

  • I’m using google chome

  • @Carlosrocha can make a jsFiddle that reproduces the problem?

  • I can send you the link where the problem is: http://hotplateprensas.com.br/novo/. Pos is a lot to put there and know how to filter out what they are for

Show 6 more comments

Browser other questions tagged jquery css css3

You are not signed in. Login or sign up in order to post.