css - 如何保持 ionic 卡的纵横比

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>

SCSS

.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%。

然后您可以将 padding-bottom 设置为 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/一个完整的例子。