Having trouble using jQuery to find the actual height of the first image nested within a container. I can access the src attribute but not the height. Any suggestions on how to get the accurate height? Is it necessary to retrieve heights via CSS? Unfortunately, setting width and height in the img tag is not an option for me.
$(document).ready(function() {
var imageContainer = '#image-container';
var imageSrc = $(imageContainer).children(':first').children(':first').attr('src'); // control test
var imageHeight = $(imageContainer).children(':first').children(':first').height(); // have also tried attr('height')
alert(imageSrc + ' ' + imageHeight);
});
<div id="image-gallery">
<div id="image-container">
<div class="slide">
<img src="test1.jpg" alt="test1" />
<p>
<strong>This is a test 1</strong>
</p>
</div>
<div class="slide">
<img src="test2.jpg" alt="test2" />
<p>
<strong>This is a test 2</strong>
</p>
</div>
</div>
</div>