Edit in JSFiddle

<div class="outer">
    <div class="inner">
        <div class="little-box">A</div>
        <div class="little-box">B</div>
        <div class="little-box">C</div>
        <div class="little-box">D</div>
        <div class="little-box">A</div>
        <div class="little-box">B</div>
        <div class="little-box">C</div>
        <div class="little-box">D</div>
        <div class="little-box">A</div>
        <div class="little-box">B</div>
        <div class="little-box">C</div>
        <div class="little-box">D</div>
    </div>
    <img class="scaling-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
    <span class="size"></span>
</div>

<div class="outer">
    <div class="inner">
        <div class="little-box">A</div>
        <div class="little-box">B</div>
        <div class="little-box">C</div>
        <div class="little-box">D</div>
        <div class="little-box">A</div>
        <div class="little-box">B</div>
        <div class="little-box">C</div>
        <div class="little-box">D</div>
        <div class="little-box">A</div>
        <div class="little-box">B</div>
        <div class="little-box">C</div>
        <div class="little-box">D</div>
    </div>
    <img class="scaling-img r2x1" src="data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
    <span class="size"></span>
</div>
.scaling-img {
    position: relative;
    visibility: hidden;
    z-index: -1;
    width: 100%;
    min-width: 100%;
    padding-top: 50%;
    margin-bottom: -4px;
}
.r2x1 {
    margin-top: -50%;
    padding-top: 0;
}

.outer {
    margin: 120px;
    position: relative;
}

.outer .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow:hidden;
    outline: 1px solid grey;
}

.little-box {
    float: left;
    outline: 1px solid steelblue;
    width: 25%;
    height: 33.333%;
}

.size {
    position: absolute;
    top: -1em;
}

// this javascript is simply to display the size of the box
// you'll see some rounding errors from the percentage calculation in CSS

$(window).on('resize', function(){

    $('.outer').each(function(){

        var box = $(this);        
        var width = box.width();
        var height = box.height();        
        
        box.find('.size').html(width+'x'+height+' (r: '+(width/height).toFixed(3)+')');

    });
}).trigger('resize');