How to maintain aspect ratio for Ionic cards

问题

I have a list of cards displayed on my Ionic page and I want them to expand proportionally. Here's my code:

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%;
}

I have tried a number of things from which setting padding-top to percent value on <ion-card> element - this made card resizable as desired, but it made image distorted.

回答1:

If by distorting you mean it's cutting some of the image off, to keep the image proportions determine the image aspect ratio in percentage. For example 4:3 is 100%:75%.

You would then set padding-bottom to 75%, width to 100%, and remove the fixed height altogether.

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

See https://jsfiddle.net/jamesreimer/jkk1vLuz/ for a full example.

来源：https://stackoverflow.com/questions/45470904/how-to-maintain-aspect-ratio-for-ionic-cards