如何调整具有不同图像大小的卡片，但保持卡片大小

Question

我有svg图像，每个图像都有不同的大小，但我正在寻找的最终结果是，所有卡片的卡大小相同，剩余空间 - 把它交给图像。

图像应该用剩余的高度填充高度，宽度可以保持"自动">或图像，例如 50px 但要vertical-align: middle它(离子助手在这里不起作用......

我有这个堆栈闪电战示例：https://ionic-qdmmmw.stackblitz.io

首页

<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 ( 不会粘在底部(当用style='display: flex'设置ion-col固定卡片时
• 图像大小影响存储卡大小

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

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