Масштабирование изображений в ng FlexLayout - PullRequest
Новая
       27

Масштабирование изображений в ng FlexLayout

0 голосов
/ 19 октября 2018

У меня проблемы с пониманием @angular/flex-layout.Я прочитал множество постов, блогов и примеров, но не могу заставить его работать, как я хочу.

Я хочу иметь один большой mat-card, заполняющий всю ширину экрана.Внутри этой карты я хочу немного текста, а справа от текста - изображение.

Под этой полноразмерной картой я хочу 6 меньших карт.На большом экране 3 столбца, меньший экран 2 столбца и наименьший экран 1 столбец.

Вот мой стек: https://stackblitz.com/edit/angular-6iqcgo

С этой демонстрацией у меня есть несколько проблем:

  1. Изображение на карте полной ширины пропорционально не масштабируется.Это сильно искажает изображение на экранах разных размеров.Как это исправить?
  2. 3 колонки с картами меньшего размера расположены неравномерно.Третья карта должна быть немного правее.Второй ряд, однако, хорош.Как это исправить?
  3. Первая маленькая карта имеет меньше текста и меньше текста.Но я бы хотел, чтобы все карты имели одинаковую высоту и желательно mat-card-actions внизу.Как это сделать?
  4. Верх карточек второго ряда перекрывают низ карточек первого ряда.Как это исправить?

Любая помощь будет высоко ценится.

1 Ответ

0 голосов
/ 19 октября 2018

  1. Я бы предложил поместить img в div, в котором есть fxFlex: 

    <div fxFlex="0 0 50%">
  <img mat-card-image src="https://i.pinimg.com/originals/79/3b/ca/793bca86db40af44ad03534f6927626b.jpg" alt="Free image">
</div>

  2. Удалите fxLayoutGap="32px" из содержащего div.

  3. Они кажутся мне одинаковой высоты.Чтобы действия были в нижней части карты, вы должны иметь возможность использовать mat-card-footer для прикрепления к нижней части карты.

  4. Вы можете установить margin-top или margin-bottom на mat-card, чтобы добавить пробел при переносе.

...