如何维持离子卡的长宽比

Question

我有一张列表显示在离子卡上的卡片，我希望它们按比例扩大。 这里是我的代码：

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> 

SCSS

.event-item { 
    margin: 25px 10px; 
} 

.card-thumbnail { 
    height: 18rem; 
    background-size: cover; 
    background-position-x: 50%; 
    background-position-y: 50%; 
} 

我已经尝试了一些东西从<ion-card>元素上设置padding-top以百分比值 - 这使得卡可根据需要调整大小，但会造成图像失真。

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/的完整示例。