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

Использую Bootstrap 3, Angular-gridster. Необходимо сделать блок с заголовком и контентом, аналогично panel с panel-heading и panel-content в Bootstrap 3. Размеры заранее неизвестны. Причем в каждом panel-content располагается изображение, значительно большее по размеру, чем родительский контейнер (panel). Обрезать изображение не нужно, нужно пропорционально его масштабировать, если остается пустое место - ок. Для подгонки размера изображения пытаюсь использовать класс img-responsive, однако конечный размер контейнера panel искажается (увеличивается его высота, в итоге высота panel больше, чем высота li; поэтому происходит наложение блоков li друг на друга)

• {{ block.title }}

Если я убираю изображение из контейнера panel-content, высота panel соответствуют высоте li. Т.е. видимо проблема в использовании .img-responsive внутри .panel
Текущие настройки angular-gridster
resizable: { enabled: false }, columns: 10, margins: [0, 0], outerMargin: false
Идеи по поводу решения:
использовать вместо img background, но как тогда растянуть div или другой контейнер, у которого устанавливается фон? использовать таблицы или display: table, display: table-cell ? изменить настройки angular-gridster? делать ресайз при помощи javascript/jQuery? Пробовал этот вариант, непонятно, когда вызывать функцию ресайзинга, т.к. блоки подгружаются не в момент document.ready() Также пробовал такой вариант, для того, чтобы не использовать Bootstrap, однако как в этом случае масштабировать изображение? И как лучше его расположить - в виде img или background? Получилось практически подогнать размер вот так: у div class="box-content"
overflow: auto;
background: url(путь к изображению) no-repeat center center transparent;
background-size: cover; //или contain
height: 100%;
Однако все равно блоки немного налезают друг на друга.
Также вместо класса img-responsive использовал img-thumbnail, разница в высотах уменьшилась, но все равно присутствует.
Или все же есть вариант решения с Bootstrap?
Обновление: Добавил пример кода Вот здесь вроде все так, как у меня сейчас, у картинок только почему-то не генерируется src из ng-src, поэтому они не подгружаются. Блоки передвигаются.
Пояснение: Заголовок увеличивает высоту. В момент перетаскивания angular-gridster выделяет область, куда можно перетащить блок, и весь блок, который перетаскивается (panel), по высоте больше, чем эта область, на высоту заголовка (panel-heading). Это происходит только в случае использования картинок в panel-content, сам заголовок проблемы с высотой блока не создает. Если я правильно понимаю, либо высота блока на основе sizeY неправильно рассчитывается, что менее вероятно, либо высота panel-content (вернее, картинки внутри)

Ответ

Посмотрел на ваш fiddle, пришёл с таким решением: fiddle
HTML

{{ block.title }}

CSS
.panel { display: flex; flex-flow: column wrap; height: 100%; }
.panel .panel-content { flex-grow: 1; }
.image-responsive { background-size: contain; background-repeat: no-repeat; }

Некоторые пункты:
Не причина проблемы, но вам не хватает jquery.resize.js, который нужен для angular-gridster если размер решётки меняет (см. readme) Использую flexbox, т.е. про Internet Explorer < 10 нужно забывать