使mat-card-image中的所有图像具有相同的尺寸，但尺寸正确

这通常不是问题，但材料2的记录非常欠缺atm，所以即时通讯不能将所有图像制作成相同尺寸但适当调整窗口大小使mat-card-image中的所有图像具有相同的尺寸，但尺寸正确

当我创建时，所有图像的尺寸都非常相似，但其中一个高度明智，但我的旧代码只是通过一些引导程序调用进行了调整。

但在垫子卡它是一个较长的长度，因此利用图像看起来格格不入如下所示：

的BAC计算器的图像是比其他人长，所以它看起来出来的的地方，在它之下推人不成比例的或强制的空单元格，这是我的呼吁，显示这些：

<div *ngIf="data;else other_content"> 
    <div class="row"> 
     <div *ngFor="let project of data" class="col-md-6"> 
     <div> 
      <mat-card class="mat-elevation-z4"> 
      <mat-card-header> 
       <div mat-card-avatar class="example-header-image"></div> 
       <mat-card-title>{{project.title}}</mat-card-title> 
       <mat-card-subtitle>{{project.category}}</mat-card-subtitle> 
       <div class="grow-empty"></div> 
       <div *ngIf="project.source"> 
       <button mat-raised-button (click)="openSite(project.source)">SOURCE</button> 
       </div> 
      </mat-card-header> 
      <img mat-card-image src="{{project.image}}" alt="{{project.title}}"> 
      <mat-card-content> 
       <p> 
       {{project.detail | slice:0:250}}... 
       </p> 
      </mat-card-content> 
      <mat-card-actions> 
       <button mat-raised-button>Information</button> 
      </mat-card-actions> 
      </mat-card> 
     </div> 
     <br> 
     </div> 
    </div> 
    </div>

如果我设置高度为静态像“300”，它在技术上解决这个问题，但重新调整会毁了它

我希望它是一组规模喜欢它，而是采取任何图像和规模上/下坐下来，是卡本身的适当大小（如Callum.Tech卡为例）

来源

2017-10-20 Cacoon

不确定我是否完全了解该问题，BAC图像的个人资料图片是什么？你在哪个div类中展示它？ – Laiman

右下图像，比其他人更大，因为我把它放大了，我希望它们的尺寸都一样 – Cacoon

只需在代码中添加此样式参考。如果要将此样式视图中的所有你的卡，添加到您的样式文件：

mat-card img{ 
    object-fit: cover; /*this makes de image in src fit to the size of specified below*/ 
    width: 100%; /* Here you can use wherever you want to specify the width and also the height of the <img>*/ 
    height: 80%; 
}

另一种解决这个问题可能是使用类引导的“IMG响应”。 Here is a brief description

来源

2017-10-27 16:33:59 Karel

使mat-card-image中的所有图像具有相同的尺寸，但尺寸正确

回答

相关问题