Пропорциональное изменение высоты блока при изменении его ширины

Данную задачу проще изобразить графически:

Сразу уточню, что будем рассатривать вариант, когда <img> обёрнут в <div>, т.к. вариант, когда <img> без обёртки рассматривать несерьёзно.

<style>
    .tile { height: 300px; border: 1px solid #999999; width: 25%; }
    .tile .img { padding-top: 66.5%; position: relative; width: 100%; }
    .tile .img .wrapper { position: absolute; bottom: 0; left: 0; right: 0; top: 0; overflow: hidden; }
    .tile .img .wrapper img { width: 100%; }
</style>

<div class="tile">
    <div class="img">
        <div class="wrapper">
            <img src="...">
        </div>
    </div>
    <div>Текст</div>
</div>

Свойства, указанные для .tile, никакого значения для решения данной задачи не имеют и добавлены для наглядности.

Живой пример по ссылке.

Пропорциональное изменение высоты достигается за счет свойства padding-top для .tile .img. В примере приведена цифра 66.5%, которая в общем случае равна:

Height_{изображения} × 100% / Width_{изображения} + вертикальный отступ от изображения до следующего блока.

А убрав свойство height для .tile получим вообще «резиновый» блок.