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

#javascript #jquery #css #bootstrap #angularjs

Использую 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 (вернее, картинки внутри) 
    

Ответы

Ответ 1

Посмотрел на ваш 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 нужно забывать


Ответ 2

Попробуйте так

.panel-content:after, .panel-content:before{
display:table;
content:" ";
clear:both;
}


Не будет вылезать за li


Ответ 3

CSS

.imageBlock{
    width:100%;
}
.imageBlock img{
    width:100%;
}


HTML

   
                  
                     



у меня работает такой вариант: