CSS 使 mat-card-image 中的所有图像大小相同但缩放正确
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46841648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make all images in mat-card-image same size but scale correctly
提问by Cacoon
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
这通常不是问题，但只有 Material 2 的文档记录不足，所以我无法使所有图像的大小相同但随着窗口更改正确调整大小
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:
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>
If I set the height as a static like '300', it technically fixes the issue but rescaling will just ruin it
如果我将高度设置为像“300”这样的静态值，它在技术上解决了这个问题，但重新缩放只会破坏它
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)
我希望它像它一样是一个固定的比例，但是拍摄任何图像并将其放大/缩小以坐下并成为卡片本身的合适尺寸（例如 Callum.Tech 卡片）
回答by Karel
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
此问题的另一个解决方案可能是使用引导程序“img-responsive”类。这是一个简短的描述
回答by Ayush Mishra
Just add css-class to the image and and style the image from the SCSS file.
只需将 css-class 添加到图像并从 SCSS 文件中设置图像样式。
<img mat-card-image class="imgs src="{{project.image}}" alt="{{project.title}}">
Now in SCSS:
现在在 SCSS 中：
imgs {
height: 50px;
width: 50px;
}
And for more to Information visit W3school.com/image.
欲了解更多信息，请访问 W3school.com/image。
