Get actual height of object whose set to "auto"

Question

This seems like quite a rudimentary issue, but no matter how I phrase it, I can't seem to find anyone who's got a solution for me.

I have an image that's set size to fit my layout and to retain its aspect ratio, like so:

img{
   width:50%;
   height:auto;
}

Since I don't know how high the image is, I have to calculate another element's position using the real height of the image (The size that it's been resized to through auto).

$("img").height();

This returns 0 whenever it's set to auto, however. What am I missing? Or how can I find the current height of an image set to auto :)?

Thanks!

Possible duplicate of [Get height of div with no height set in css](http://stackoverflow.com/questions/9592575/get-height-of-div-with-no-height-set-in-css) — nicael, Jun 14 '16 at 20:43
I don't see what the problem is? https://jsfiddle.net/XL2000/fkwpdd67/ — Midas, Jun 14 '16 at 20:46
Possible duplicate of [Get element height when style = auto or 100%?](http://stackoverflow.com/questions/15276240/get-element-height-when-style-auto-or-100) — KRONWALLED, Jun 14 '16 at 20:46

Marat Tanalin · Accepted Answer · 2018-03-30T13:28:42.753

5

In vanilla JavaScript:

element.offsetHeight;

To get correct value, make sure your image is already loaded. For this, either use the load event of window, or preload your image via JS. Do not use the DOMContentLoaded event of document or ready in jQuery.

edited Mar 30 '18 at 13:28

answered Jun 14 '16 at 20:46

Marat Tanalin

13,927
1
36
52

Midas · Answer 2 · 2016-06-14T21:08:27.113

1

You are probably using the "document ready" event while you should be using the load event. You cannot retreive the dimensions of an image before it has been rendered in the browser.

$(window).load(function() {
    $(window).resize(function() {
        console.log('Height: ' + $('img').height());
    }).resize();
});

img {
    width: 50%;
    height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://lorempixel.com/200/200" height="200" width="200">

edited Jun 14 '16 at 21:08

answered Jun 14 '16 at 20:50

Midas

7,012
5
34
52

Not quite it. I'm looking for the resized height - not the original one. – user3307017 Jun 14 '16 at 20:54
@user3307017 Yes it is. The original height of the image in this example is 200px. – Midas Jun 14 '16 at 20:56
Try opening your snippet in full screen. Even though it's almost 2000px high, it still says 250~ – user3307017 Jun 14 '16 at 21:03
@user3307017 I didn't handle window resize in this example. It shows the image size on load only.. Answer updated – Midas Jun 14 '16 at 21:05

score 1 · Answer 3 · answered Jun 14 '16 at 20:52

1

i think this would be helpful:

document.defaultView.getComputedStyle(document.querySelector("selector")).height;

It returns a string with the real height in px.

answered Jun 14 '16 at 20:52

Pedro Mora

95
9

gaetanoM · Answer 4 · 2016-06-15T13:37:19.317

My proposal is:

$(function () {

  // in jQuery you can use: 
  var h = $("img").height();
  console.log('$("img").height() is: ' + h);
  console.log('$("img").css("height") is: ' + $("img").css("height"));
  

  // in javascript, with the unit measure:
  // This form corresponds to the second jQuery method
  var elem = document.querySelectorAll('img')[0];
  var h1 = window.getComputedStyle(elem).height;
  console.log('window.getComputedStyle(elem).height is: ' + h1);
});

img{
  width:50%;
  height:auto;
}

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<img src="https://www.google.it/logos/doodles/2016/karl-landsteiners-148th-birthday-5693101206142976-res.png">

Get actual height of object whose set to "auto"

4 Answers4