JQuery высота() отличается от clientHeight

Question

Так у меня есть элемент:

<div class="obj"> 
    <img width="896" height="595" src... /> 
    <div class="details"> 
    <h2>Title</h2> 
    <p>...</p> 
    </div> 
</div> 
<div class="obj"> 
    <img width="896" height="595" src... /> 
    <div class="details"> 
    <h2>Title</h2> 
    <p>...</p> 
    </div> 
</div> 

Я тогда исполняющей это на них:

$objs = $('.obj'); 
$objs.each(function() { 
    console.log($(this).height()); 
} 

В элементе инспектора в Chrome, высота .obj 720 (то же, что и изображение). Однако я получаю 0 в консоли для каждого элемента.

Изображения не плавают, поэтому .obj содержит его детей в css. Я действительно не знаю, что может быть неправильным, и почему jQuery не возвращает 720.

Может ли это быть связанным с CSS?

Answer 1

Обращайтесь к событию window.onload, чтобы обеспечить загрузку всех изображений, например.

$(window).load(
    function() { 
    $objs = $('.obj'); 
    $objs.each(function() { 
     console.log($(this).height()); 
    } 
    } 
); 

Answer 2

Это может быть связанный с CSS. Без публикации вашего CSS это трудно понять. (Вы говорите, что Chrome сообщает, что высота obj равна 720, то же самое, что и изображение, но высота изображения установлена ​​равной 595)?

Этот jsfiddle показывает, как он работает.