使 mat-card-image 中的所有图像大小相同但缩放正确 [英] Make all images in mat-card-image same size but scale correctly

问题描述

这通常不是问题，但只有 Material 2 的 atm 文档记录不足，所以我无法将所有图像设为相同大小，但在更改窗口时正确调整大小

当我创建时，我拥有的所有图像的大小都非常相似，但在高度方面稍长一些，但我的旧代码只是通过一些引导程序调用对其进行了调整.

但是使用垫卡中的图像长度更长，因此看起来与此处显示的位置不符:

BAC 计算器的图像比其他计算器的图像长，因此它看起来格格不入并且将其他计算器不成比例地推到它下面或强制一个空单元格，这是我对显示这些的要求:

<div class="row"><div *ngFor="让数据项目" 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>
</mat-card-header><img mat-card-image src="{{project.image}}" alt="{{project.title}}"><mat-card-content><p>{{project.detail |切片:0:250}} ...</p></mat-card-content><mat-card-actions><button mat-raised-button>信息</button></mat-card-actions></mat-card>

<br>

如果我将高度设置为像300"这样的静态高度，它在技术上可以解决问题，但重新缩放只会破坏它

我希望它是一个固定的比例，但拍摄任何图像并将其放大/缩小以坐下并成为卡片本身的合适尺寸(例如 Callum.Tech 卡片)

解决方案

只需在您的代码中添加此样式引用即可.如果您想将此样式应用于视图中的所有卡片，请添加到您的样式文件中:

mat-card img{适合对象:覆盖；/*这使src中的图像适合下面指定的大小*/宽度:100%；/* 这里你可以在任何你想指定宽度和高度的地方使用<img>*/高度:80%；}

此问题的另一个解决方案可能是使用引导程序img-responsive"类.这里是简要说明

This usually isnt a problem but just Material 2 is very under-documented atm so im having trouble making all images the same size but properly resize with window change

All the images I have were pretty similar in size when I created then but one was abit longer height wise, but my old code just adjusted that with some bootstrap calls.

But using the image in a mat-card it is a longer length and thus looks out of place shown here:

The BAC calculator's image is longer than the rest so it looks out of place and pushes others out of proportion under it or forces an empty cell, here is my call for displaying these:

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

If I set the height as a static like '300', it technically fixes the issue but rescaling will just ruin it

I want it to be a set scale like it is, but take any image and scale it up/down to sit and be an appropriate size for the card itself (like Callum.Tech card for example)

解决方案

Just add this style reference in your code. If you want to apply this styles to all your cards in the view, add to your style file:

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

Another solution to this issue may be using the class of bootstrap "img-responsive". Here is a brief description

这篇关于使 mat-card-image 中的所有图像大小相同但缩放正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！