Как согласовать высоту изображения с контентом родного брата и сохранить пропорции изображения?

Мне удалось обойти масштабированное фоновое изображение на моем сайте, используя свойство background-size: cover в сочетании с центрированным фиксированным фоновым изображением на содержащем элементе

Уловка для вас будет заключаться в том, чтобы установить изображение в качестве фона, например, для div и автоматически изменить размер этого div для доступного пространства.

Вот jsfiddle: http://jsfiddle.net/20v1mgr0/1/

Разметка будет примерно такой:

<div class="hero-unit table">
    <div class="table-row">
        <div class="width-one table-cell scaled-image"></div>
        <div class="width-two table-cell text-area">
            <h2>Text goes in here</h2>
            <p>Text goes in here</p>
        </div>
    </div>
</div>

Стиль будет примерно таким:

.table{
    position: relative;
    display:table;
}
.table-row{
    position: relative;
    display:table-row;
}
.table-cell{
    position: relative;
    display:table-cell;
}
.hero-unit{
    width:600px;
    padding:20px;
    background:yellow;
    margin-bottom:20px;
}
.scaled-image { 
    background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border:1px solid green;
}
.text-area{
    background:blue;
}
.width-one {
    width:20%;   
}
.width-two {
    width:80%;
    padding:0 20px;
}