如何保持离子卡的纵横比答案

【问题标题】：How to maintain aspect ratio for Ionic cards如何保持离子卡的纵横比
【发布时间】：2018-01-10 06:33:38
【问题描述】：

我的 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> 元素的百分比值 - 这可以根据需要调整卡片的大小，但会使图像失真。

【问题讨论】：

标签： css ionic-framework sass ionic2 aspect-ratio

【解决方案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/。

【讨论】：