Faire toutes les images dans mat-card-image même taille mais mettre à l'échelle correctement

Question

Ce n'est généralement pas un problème, mais juste matériel 2 est très sous-document atm donc avoir du mal à faire toutes les images de la même taille mais redimensionner correctement avec changement de fenêtre

Toutes les images que j'ai ont été de taille assez similaire quand j'ai créé, mais il y en avait une plus longue, mais mon ancien code a juste ajusté cela avec des appels bootstrap.

Mais en utilisant l'image dans un tapis de carte est une plus grande longueur et semble donc hors de Montré ici:

L'image de la calculatrice de BAC est plus long que le reste il semble hors de lieu et pousse les autres hors de proportion sous ou force une cellule vide, voici mon appel pour afficher ces:

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

Si je mets la hauteur en statique comme « 300 », il fixe techniquement la question, mais redimensionnant va juste le gâcher

Je veux que ce soit une échelle de jeu comme il est, mais prendre une image et l'échelle vers le haut/bas pour asseoir et être une taille appropriée pour la carte elle-même (comme la carte Callum.Tech par exemple)

Answer 1

Ajoutez simplement cette référence de style dans votre code. Si vous voulez appliquer ce style à toutes vos cartes dans la vue, ajoutez à votre fichier de style:

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

Une autre solution à ce problème peut être d'utiliser la classe de bootstrap « img sensibles ». Here is a brief description