Использую Bootstrap 3, Angular-gridster.
Необходимо сделать блок с заголовком и контентом, аналогично panel
с panel-heading
и panel-content
в Bootstrap 3.
Размеры заранее неизвестны.
Причем в каждом panel-content
располагается изображение, значительно большее по размеру, чем родительский контейнер (panel). Обрезать изображение не нужно, нужно пропорционально его масштабировать, если остается пустое место - ок.
Для подгонки размера изображения пытаюсь использовать класс img-responsive
, однако конечный размер контейнера panel искажается (увеличивается его высота, в итоге высота panel больше, чем высота li
; поэтому происходит наложение блоков li
друг на друга)
<div gridster="gridsterOpts">
<ul>
<li gridster-item="block" ng-repeat="block in blocks" data-row="block.position[0]" data-col="block.position[1]">
<div class="panel panel-default">
<div class="panel-heading">
{{ block.title }}
</div>
<div class="panel-content">
<img class="img-responsive" ng-src="/media/{{ block.image }}">
</div>
</div>
</li>
</ul>
</div>
Если я убираю изображение из контейнера 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 (вернее, картинки внутри)
li
, определяется относительно ширины экрана параметромsizeX
, он же используется для определения и резервирования места при перемещенииli
. Чтобы блоки не наезжали друг на друга, нужно определить длину.panel-heading
и если она больше текущей шириныli
, то увеличить значениеsizeX
у этогоid
. вот как-то так.