如何保持离子卡的纵横比

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%，将 width 设置为 100%，并完全删除固定高度。

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

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

如何保持离子卡的纵横比

How to maintain aspect ratio for Ionic cards

css

sass

aspect-ratio

ionic-framework

ionic2