JSFiddle - React, Tailwind, and code Playground

HTML

<div id="previewWrapper">
    <div id="previewFrame">
        <img id="previewImage" src="http://i.forbesimg.com/media/lists/companies/google_416x416.jpg"></img>
    </div>
</div>

CSS

html, body {
    margin:0;
    background:#ccc;
}
#previewWrapper {
    margin:44px 0px;
    width:100%;
    height:calc(100% - 88px);
}
#previewFrame {
    width:100%;
    height:100%;
    margin-top:44px;
    background:#000;
}
#previewFrame img {
    max-width:100%;
    max-height:100%;
}

JavaScript

function imageInfo() {
    var pFrame = document.getElementById("previewFrame");
    pFrame.setAttribute('style', "width: 100%; height: calc(100% - 88px);");
    var pFrameStyle = window.getComputedStyle(pFrame, null);
    var frameWidth = pFrameStyle.width;
    var frameHeigh = pFrameStyle.height;
    
    var pImage = document.getElementById("previewImage");
    var imageWidth = pImage.width;
    var imageHeigh = pImage.height;


    alert('Frame size is ' + frameWidth + ' x ' + frameHeigh);
}

window.onload = imageInfo;