Я создаю приложение Angular 7 / Материал / Flex-layout , и мне трудно получить мат-карту с мат-картой -образное реагирование.
Мат-изображение карты представляет собой квадратное изображение с максимальной шириной / максимальной высотой 160 пикселей.
Схема того, чего я пытаюсь достичь :
Слева родитель достаточно большой, чтобы отобразить мат-карту с изображением мат-карты максимального размера (160 * 160 пикселей). Это означает, что размер карты mat равен (ширина) * (высота) → (160px) * (заголовок карты mat + 160px + содержимое карты mat) . У меня все работает нормально.
Справа (отзывчиво) родитель не достаточно велик: размер изображения карточки мата изменен. например размер нового изображения карты mat - 100 * 100px, размер карты mat - (ширина) * (высота) → (100px) * (заголовок карты mat + 100px + mat- карта-контента) . Вот где у меня проблема, размер изображения карты не изменен:
Красной является мат-карта, но, как вы можете видеть, содержимое не соответствует мат-карте (размер изображения должен быть изменен).
Я много чего перепробовал, но вот мой текущий код:
HTML
<div fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
<mat-card>
<mat-card-header fxLayoutAlign="center">
<mat-card-title style="margin-bottom: 0px;" >
foo
</mat-card-title>
</mat-card-header>
<img mat-card-image [src]="foo" style="margin-bottom: 0px;" layout-fill>
<mat-card-content fxLayoutAlign="center" style="margin-top: 0px;">
foo
</mat-card-content>
</mat-card>
<span></span>
</div>
CSS
mat-card {
max-width: 160px;
max-height: 100%;
padding-top: 0px;
padding-bottom: 0px;
box-sizing: border-box;
}
Как этого добиться?