Question

我正在构建 Angular 7 / 材料 / 弹性布局应用，但是我很难获得带有垫卡图像响应。

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

我要实现的目标方案：

父级在左侧足够大，可以显示具有最大尺寸的mat-card-image（160 * 160px）的mat-card。这表示Mat卡的尺寸为（宽度）*（高度）→（160像素）*（mat-card-header + 160px + mat-card-content）。一切对我来说都很好。
在右边（响应方式），父级不够大：调整了mat-card-image的大小。例如新的mat-card-image的大小为100 * 100px，mat-card的大小为（宽度）*（高度）→（100px）*（mat-card-header + 100px + mat -card-content）。这是我遇到的问题，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;
}

如何实现？

Answer 1

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

您能给我们更多的CSS吗？尝试编辑您的代码，但目前操作不足... http://www.cssdesk.com/rccRc

席卡的内容不适合席卡

1 个答案: