如何调整具有不同图像尺寸的卡片但保持卡片尺寸

Question

我有 svg 图像，每个图像都有不同的大小，但我正在寻找的最终结果是所有卡片的卡片大小相同，其余 space - 将其提供给图像。

图像应该用剩余的高度填充高度，宽度可以保持"auto" 或图像以50px为例但有它vertical-align: middle它（离子助手在这里不起作用..）

我有这个 stackblitz 示例：https://ionic-qdmmmw.stackblitz.io

home.ts

<ion-header>
  <ion-navbar>
    <ion-title>Ionic 2 - cards with different img size but same card size</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-row>  
   <ion-col col-4>
  <ion-card style="border: green 2px solid;">
    <img 
      style="height: 40px; width: auto;"
      src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
    <ion-card-content style="padding: 0; background-color: yellow;">
      <ion-card-title style="background-color: red">
        Nine Inch Nails Live
        </ion-card-title>
      <p>
        The most popular industrial group ever, and largely
        responsible for bringing the music to a mass audience.
      </p>
    </ion-card-content>
  </ion-card>
   </ion-col>

   <ion-col col-4>
  <ion-card style="border: green 2px solid;">
    <img 
      style="height: 20px; width: auto;"
      src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
    <ion-card-content style="padding: 0; background-color: yellow;">
      <ion-card-title style="background-color: red;">
        Nine Inch Nails Live
        </ion-card-title>
      <p>
        The most popular industrial group ever, and largely
        responsible for bringing the music to a mass audience.
      </p>
    </ion-card-content>
  </ion-card>
   </ion-col>
</ion-row>
</ion-content>

上面的例子有几个问题：

页脚（ion-card-title）没有粘在底部（固定卡片时用 ion-col 和 style='display: flex'
图片大小影响卡片大小

尝试了很多东西，但仍然没有得到正确的结果...有什么想法吗？

Answer 1

Stackblitz link

ion-content {
  ion-col {
    display: flex;
  }
}

ion-card {
  img {
    margin: 10px auto;
    height: 25vh !important;
    width: auto !important;
    max-width: 85%;
    align-items: center;
  }
  ion-card-content {
    padding: 0 !important;
    ion-card-title {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }
  }
}

如何调整具有不同图像尺寸的卡片但保持卡片尺寸

How to adjust cards with different image size but keep cards size

sass

ionic2

home.ts