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

问题描述

这通常不是问题，但是只有Material 2的atm文档数量很少，因此我无法使所有图像具有相同的大小，但是可以通过更改窗口来正确调整大小

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

当时我创建的所有图像的大小都非常相似，但是高度上要长一些，但是我的旧代码只是通过一些bootstrap调用进行了调整.

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:

BAC计算器的图像比其他图像长，因此它看起来不合适，并在其下方推挤其他对象或迫使其为空单元格，这是我要求显示的图像:

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>

如果我将高度设置为"300"之类的静态值，从技术上讲，它可以解决问题，但重新缩放只会破坏它

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

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

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

该问题的另一种解决方案可能是使用引导程序类"img响应". 这里是简短说明

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

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