Материал Угловой дисплей карты

У меня есть галерея изображений, и я хотел бы отображать их в системе на основе карт поляроид, охватывающей несколько строк и столбцов. Проблема, с которой я столкнулся, связана с макетом изображения. Когда изображения и портретные, и альбомные, атрибут mat-card для альбомных становится раздутым, чтобы соответствовать размеру портретных. Как я могу получить систему естественного заполнения, в которой мат-карта адаптируется к соотношению ширины / высоты изображения?

HTML:

<div fxLayout="row">
    <div layout="column">
        <div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" class="mat-elevation-z0" *ngIf="postcards != null">
            <mat-card *ngFor="let postcard of postcards let index = index" >
                    <img mat-card-image src="{{postcard.img}}" alt="{{postcard.postcard_id}}" class="postcards" (click)="display_postcard(index)">
            </mat-card>
        </div>
    </div>
</div>

CSS:

.postcards {
    max-width: 320px;
}

Текущее представление: Вы можете увидеть, как контейнер для каждой альбомной карты увеличивается до высоты вертикальной (не то, чего я хотел бы достичь)

И вот чего я хотел бы достичь: введите описание изображения здесь

Спасибо!


angular angular-material angular-flex-layout
person Adrian    schedule 24.11.2017    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Я думаю, что вы ищете fxLayoutAlign собственность.

Попробуйте добавить fxLayoutAlign="start start" в свой div вот так:

<div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="start start" class="mat-elevation-z0" *ngIf="postcards != null">

PS Если вы хочу поиграть с разными вариантами.

person Bohdan Khodakivskyi    schedule 27.11.2017
comment
Спасибо! Это на полпути! Это делает размер карты матов соответствующим изображению, однако не помещает два горизонтальных изображения в один столбец. Я начинаю думать, что это может быть невозможно: / - person Adrian; 28.11.2017
comment
Кажется, что у всех ваших карточек одинаковая ширина. Предполагая, что я предлагаю вам попробовать fxLayout="column" в том же div и посмотреть, приближаетесь ли вы. Дай мне знать, помогло ли это - person Bohdan Khodakivskyi; 28.11.2017
comment
К сожалению, это превращает всю страницу в один столбец :( - person Adrian; 28.11.2017

arrow_upward
0
arrow_downward

Вы можете попробовать каменную кладку или изотоп, чтобы заполнить пробелы, у обоих есть пакеты npm в dev:

https://www.npmjs.com/package/angular2-isotope

https://www.npmjs.com/package/angular2-masonry

person Chris Francart    schedule 29.11.2017
comment
Я не знаю, почему я думал, что это возможно без использования дополнительных библиотек, но я попробую и сообщу. Спасибо за предложения, очень ценим. - person Adrian; 30.11.2017

arrow_upward
0
arrow_downward

Я знаю, что мой ответ покажется странным, но я думаю, что поплавок слева, возможно, вы ищете (да, я ненавижу плавать)

Но если вы избавитесь от всего гибкого материала в своем примере и добавите маржу прямо на мат-карту

<div class="mat-elevation-z0" *ngIf="postcards != null">
      <mat-card *ngFor="let postcard of postcards let index = index" >
              <img mat-card-image src="{{postcard.img}}" alt="{{postcard.postcard_id}}" class="postcards" (click)="display_postcard(index)">
      </mat-card>
</div>



mat-card {
   margin: 1rem;
   float: left;
}

Ваша карта будет стараться уместиться в доступном пространстве. Но, конечно, это не будет идеальным вариантом для всех случаев. Но я думаю, что это лучшее решение только для css, которое вы можете найти.

person Pierre Mallet    schedule 04.12.2017