如何将 mat-card-image 高度设置为 100%? [英] How to set mat-card-image height to 100%?

问题描述

我遇到了一个奇怪的问题..我有一张卡片，它在底部留下了空间

这是代码:app.component.html

<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="背景图片">
<div fxLayout.gt-sm="column" fxFlex.gt-sm="50%" class="gutter"><路由器插座></路由器插座>

</mat-card-content></mat-card>

css 部分:

.center {左边距:自动；右边距:自动；}.space-top {保证金最高:5%；}@media only screen and (min-width: 799px){.gutter {左边距:32px；}}

解决方案

好吧，实际上发生的是，我的表单的高度大于左侧图像的高度.所以我不得不为图像添加一些 css 属性

img {高度:适合内容；//这样它就占据了全部空间最大高度:500px！重要；//这可以防止图像过大适合对象:覆盖；对象位置:中心；/* 这会居中并裁剪图像，以免破坏纵横比 */}

I'm facing a weird problem..I have a card and it leaves space at the bottom

This is the code: 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 part:

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

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

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

解决方案

Ok so what actually happened is, the height of my form was greater than height of the image on left. So i had to add a few css properties to the image

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 */
}

这篇关于如何将 mat-card-image 高度设置为 100%?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！