JSFiddle - React, Tailwind, and code Playground

HTML

<div id="img" style="background:url(http://img.phombo.com/img1/photocombo/987/cache/wide-wallpaper-1440x900-013_display.jpg) #1BA5E0;">
    I want to get the size of the image below. Not the original size but the size as it shown here.
</div>
    <p>
        <button id="get">Get Contained Size</button>

CSS

#img {
    width:300px;
    height:300px;
    overflow:hidden;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    color:#fff;
}

JavaScript

$('#get').click(function () {
    var width = $('#img').css('background-size').width();
    var height = $('#img').css('background-size').height();

    alert('Width: ' + width + ' Height: ' + height);
});

//I DON'T want the size of the orginal image. I want the size after the background size has been contained.