Responsive Dimensions

by Matthew Day

HTML

<div class="viewport">
    <div class="content-area">
        <div class="ratio one-to-one" style="background-image: url(http://www.sxc.hu/pic/l/s/so/soulbeauty/1424924_93907966.jpg)">
    </div>
    <div>
</div>
    <div class="viewport">
        <div id="width"></div>
        <span>x</span>
        <div id="height"></div>
    </div>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.viewport {
    background: rgba(200,200,200,0.2);
    border: 1px solid blue;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.content-area {
    border: 1px solid red;
    bottom: 0;
    height: 80%;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 80%;
}

.ratio {
    position: relative;
    margin: 0 auto;
    width: 50%;
    height: 0;
    background-repeat: no repeat;
	background-position: center center;
	background-size: cover;
}

.one-to-one {
    padding-top: 50%;
    position: relative;
}

#width,
#height {
    display: inline-block;
    margin: 0 4px;
}

JavaScript

$(document).ready(function() {
    
    
    
    $(window).resize(function() {
		var viewportWidth = $(window).width();
        $("#width").empty().html(viewportWidth);
        var viewportHeight = $(window).height();
        $("#height").empty().html(viewportHeight);
    });
});

// Ignore the code with the image and boxes. This fiddle is for the viewport dimension sizes only.