如何保持离子卡的纵横比

Question

我的Ionic页面上显示了一个卡片列表，我希望它们按比例扩展。 这是我的代码：

.HTML

<ion-content class="home" padding>
<ion-card class="event-item"  *ngFor="let item of items">
<div [ngStyle]="{'background-image': 'url(' + item.img + ')'}" class="card-thumbnail"></div>
<ion-card-content> 
<p [innerHTML]="item.excerpt"></p>
</ion-card-content>
</ion-card>
</ion-content>

南海

.event-item {
margin: 25px 10px;
}
.card-thumbnail {
height: 18rem;
background-size: cover;
background-position-x: 50%;
background-position-y: 50%;
}

我已经尝试了许多方法，从中将padding-top设置为<ion-card>元素的百分比值 - 这使得卡片可以根据需要调整大小，但它使图像失真。

Answer 1

如果扭曲的意思是它正在剪切一些图像，为了保持图像比例，请以百分比形式确定图像纵横比。例如，4：3 是 100%：75%。

然后，将底部填充设置为 75%，将宽度设置为 100%，并完全删除固定高度。

.card-thumbnail {
background-size: cover;
background-position-x: 50%;
background-position-y: 50%;
width: 100%;
padding-bottom: 75%;
}

有关完整示例，请参阅 https://jsfiddle.net/jamesreimer/jkk1vLuz/。