mat-card 的内容不适合 mat-card答案

【问题标题】：mat-card's content not fitting mat-cardmat-card 的内容不适合 mat-card
【发布时间】：2019-06-09 21:01:01
【问题描述】：

我正在构建一个 Angular 7 / Material / Flex-layout 应用程序，但我在获取 mat-card 时遇到了困难mat-card-image 响应式。

mat-card-image 是一张方形图片，最大宽度/最大高度为 160 像素。

我正在努力实现的方案：

在左侧，父级足够大，可以显示最大尺寸 mat-card-image (160*160px) 的 mat-card。这意味着 mat-card 的大小为 (width) * (height) → (160px) * (mat-card-header + 160px + mat-card-content)。我这里一切正常。
在右侧（响应方式）父级不够大：调整了 mat-card-image 的大小。例如新的 mat-card-image 的尺寸是 100*100px，mat-card 的尺寸是 (width) * (height) → (100px) * (mat-card-header + 100px + mat -卡片内容）。这是我遇到问题的地方，mat-card-image 没有调整大小：

红色是垫卡，但您可以看到内容不适合垫卡（应调整图像大小）。

我尝试了很多东西，但这是我当前的代码：

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;
}

如何实现？

【问题讨论】：

标签： css angular angular-material angular-flex-layout

【解决方案1】：

考虑使用background-size: cover; 来调整容器的图像大小。

你能给我们更多你的css吗？正在尝试编辑您的代码，但目前还不够...http://www.cssdesk.com/rccRc

【讨论】：