这通常不是问题,但只是 Material 2 的记录很少,所以我很难使所有图像具有相同的尺寸,但可以通过窗口更改正确调整大小
当我创建时,我拥有的所有图像的大小都非常相似,但其中一个在高度方面稍长一些,但我的旧代码只是通过一些引导调用进行了调整。
但在 mat-card 中使用图像时,它的长度较长,因此看起来不合适,如下所示:
![enter image description here](https://i.stack.imgur.com/M6dLd.png)
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 卡)
只需在您的代码中添加此样式引用即可。
如果您想将此样式应用于视图中的所有卡片,请添加到样式文件中:
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-responsive”类。这是一个简短的描述
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)