JSFiddle - React, Tailwind, and code Playground

HTML

<div id="img" style="background:url(http://www.magneticwebworks.com/wp-content/uploads/jquery_logo_color_onwhite.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 () {
   get('#img');
});

function get(img){

    var imageSrc = $(img).css('backgroundImage')
                       .replace(/url\((['"])?(.*?)\1\)/gi, '$2')
                        .split(',')[0];    
    var image = new Image();
    image.src = imageSrc;
    var bgwidth = image.width,
        bgheight = image.height,    
        bgContainWidth = $(img).width();
    
    var bgContainHeight = (bgheight*bgContainWidth)/bgwidth;
    
    var decimal = bgContainHeight.toString().split('.');
    
    if(decimal[0]>=5)
    {
        bgContainHeight = Math.ceil(bgContainHeight);
    }
    else
    {
        bgContainHeight = Math.floor(bgContainHeight);
    }
    
   alert('bg Contain width = ' + bgContainWidth+ ', bg Contain Height = ' + bgContainHeight);
    
}