时间戳

首页 > 解决方案 > 如何将 mat-card-image 高度设置为 100%？

angular - 如何将 mat-card-image 高度设置为 100%？

问题描述

我面临一个奇怪的问题..我有一张卡片，它在底部留下了空间图像输出

这是代码：app.component.html

<div fxLayout="row">
  <mat-card fxLayout="row" fxFlex="80%" class="center space-top">
    <mat-card-content fxLayout.gt-sm="row">
      <div fxLayout.gt-sm="column" fxFlex.gt-sm="40%">
        <img mat-card-image src="../../../assets/background.jpg" alt="background image">
      </div>
      <div fxLayout.gt-sm="column" fxFlex.gt-sm="50%" class="gutter">
        <router-outlet></router-outlet>
      </div>
    </mat-card-content>
  </mat-card>
</div>

CSS部分：

.center {
  margin-left: auto;
  margin-right: auto;
}

.space-top {
  margin-top: 5%;
}

@media only screen and (min-width: 799px){
  .gutter {
    margin-left: 32px;
  }
}

标签： angularangular-material

解决方案

好的，实际发生的情况是，我的表单高度大于左侧图像的高度。所以我不得不在图像中添加一些 CSS 属性

img {
  height: fit-content; //so that it takes up full space
  max-height: 500px !important; // this prevents the image from being extremely big
  object-fit: cover; 
  object-position: center; /* this centers and crops the image so that it doesn't break the aspect ratio */
}

推荐阅读