6

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

7
  • приведите пример кода на jsfiddle.net, а то непонятно как и почему они "налазят"
    – Neka
    14 окт 2015 в 9:55
  • @Neka попытался, но выдает ошибку, не могу разобраться jsfiddle.net/mdlv/e1jvagkq
    – Emm
    14 окт 2015 в 13:28
  • 1
    Проблему с подключением скриптов исправил: jsfiddle.net/e1jvagkq/2
    – Qwertiy
    14 окт 2015 в 22:21
  • jsfiddle.net/e1jvagkq/9 Вот здесь вроде все так, как у меня сейчас, у картинок только почему-то не генерируется src из ng-src, поэтому они не подгружаются. Блоки передвигаются.
    – Emm
    15 окт 2015 в 8:12
  • Ширина li, определяется относительно ширины экрана параметром sizeX, он же используется для определения и резервирования места при перемещении li. Чтобы блоки не наезжали друг на друга, нужно определить длину .panel-heading и если она больше текущей ширины li, то увеличить значение sizeX у этого id. вот как-то так.
    – Neka
    15 окт 2015 в 8:30

3 ответа 3

4

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

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

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

6
  • не помогло, блоки точно так же себя ведут
    – Emm
    15 окт 2015 в 8:17
  • Как ведут? как на картинке panel-heading что ли на верхнего залезает?
    – HELO WORD
    15 окт 2015 в 8:19
  • как на картинке, нижний блок (panel) перекрывает частично верхний
    – Emm
    15 окт 2015 в 8:25
  • для panel-heading тоже добавь .panel-heading:after, .panel-heading:before{ display:table; content:" "; clear:both; }
    – HELO WORD
    15 окт 2015 в 12:12
  • сделал так, теперь немного по-другому накладываются друг на друга: s017.radikal.ru/i426/1510/db/fde57a19d1ac.png
    – Emm
    15 окт 2015 в 13:05
3

CSS

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

HTML

<div class="panel-content imageBlock">   
    <img class="img-responsive" ng-src="/media/{{ block.image }}">                                    
</div>

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

<div class="panel-content">
   <div class="img-responsive">
      <img ng-src="/media/{{ block.image }}">
   </div>                                    
</div>
8
  • а что будет, если фото вертикальное? Например в Блок 2 (на картинке в вопросе) вставить вертикальную картинку.... Не получится ли она растянута на ширину?
    – cyadvert
    14 окт 2015 в 8:21
  • да, она растянется, но это уже вариации на тему CSS max-width:100% например
    – Dmitry
    14 окт 2015 в 8:34
  • @Dmitry у меня то же самое, блоки накладываются друг на друга. Проблема возникает именно при использовании заголовка, без него все работает и без дополнительных стилей.
    – Emm
    14 окт 2015 в 13:46
  • @Emm а если обернуть панель в контейнер?
    – Dmitry
    16 окт 2015 в 7:43
  • 1
    @Emm думаю что все-таки у обертки hight:auto, пусть ангуляр расчитывает высоту блока от обертки а не от панели
    – Dmitry
    20 окт 2015 в 12:43
2
+100

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

HTML

<div class="panel panel-default">
    <div class="panel-heading">{{ block.title }}</div>
    <div class="panel-content image-responsive" 
         ng-style="{'background-image':'url(' + block.image + ')'}"></div>
</div>

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
  • большое спасибо, все работает. Но обнаружилась одна проблема - при масштабировании страницы в браузере масштаб не применяется к изображениям внутри блоков.
    – Emm
    9 ноя 2015 в 8:53
  • вот в этом примере масштабирование работает rawgit.com/ManifestWebDesign/angular-gridster/master/… правда, там не используется flexbox
    – Emm
    9 ноя 2015 в 9:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.