JSFiddle - React, Tailwind, and code Playground

by cyrilkong

HTML

<div>
<img class="dummy" src="http://dummyimage.com/600x400/000/fff" alt="" />
</div>
<div>
<img class="dummy" src="http://dummyimage.com/800x800/000/fff" alt="" />
</div>
<div>
<img class="dummy" src="http://dummyimage.com/400x200/000/fff" alt="" />
</div>
<div>
<img class="dummy" src="http://dummyimage.com/550x200/000/fff" alt="" />
</div>

CSS

img.dummy {
    width: 200px;
}

JavaScript

function imgRealSize(img) {
    var $img = $(img);
    if ($img.prop('naturalWidth') === undefined) {
        var $tmpImg = $('<img/>').attr('src', $img.attr('src'));
        $img.prop('naturalWidth', $tmpImg[0].width);
        $img.prop('naturalHeight', $tmpImg[0].height);
    }
    return {
        'width': $img.prop('naturalWidth'),
        'height': $img.prop('naturalHeight')
    };
}

$(function() {
    var target = $('img.dummy');
    var target_native_width;
    var target_native_height;
    target.each(function(index) {
        // console.log(index);
        imgRealSize(this[index]);
        target_native_width = $(this).prop('naturalWidth');
        target_native_height = $(this).prop('naturalHeight');
        $(this).parent('div').append('<p>This image actual size is ' + target_native_width + ' x ' + target_native_height + ', and css is ' + $(this).width() + ' x ' + $(this).height() + '.</p>');
    });
});