I am dynamically adding divs and I need to retrieve the height and width of an image. Based on this information, I have to apply CSS to the MB-Container class.
For example: if the image is portrait orientation, set container width to 100%. If it's landscape, 'self-align' should be set to 'flex-end'.
$('.MB-Container').append('' +
'<div class="Cover-Item">' +
'<img src="' + cover + '" style="width:100%; height:100%;"/>' +
'</div>' +
'</div>');
However, when attempting to obtain the height and width of the image, I am receiving a zero value for height:
var itemWidth = $('#item1 .Cover-Item img').width();
var itemHeight = $('#item1 .Cover-item img').height();
Is there a way to add an onload function within the append method to check the image width/height?
I have tried:
$(document).on("load",".Cover-Item img", function() {
}).each(function() {
if(this.complete || /*for IE 10-*/ $(this).height() > 0)
console.log($(this).load());
$(this).load();
});
Unfortunately, this only triggers once.