イオニックカードの縦横比を維持する方法

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/を参照してください。