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

我有svg图像，每个图像都有不同的大小，但我要寻找的最终结果是，所有卡的大小都相同，剩余的空间——给图像

图像应该用剩余的高度填充高度，宽度可以保持“自动”或图像，例如50px，但要使其垂直对齐：中间它（Ionic helpers在这里不起作用..）

我有一个stackblitz的例子：

home.ts

Ionic 2-具有不同img大小但大小相同的卡
九寸钉子还活着

有史以来最受欢迎的工业集团
负责将音乐带给大众观众。

九寸钉子还活着

有史以来最受欢迎的工业集团
负责将音乐带给大众观众。

我在上面的例子中遇到了几个问题：

• 页脚（

  ion卡标题

  ）未粘贴到底部（当使用

  ion列设置固定卡时，使用
  style='display:flex'

• 图像大小影响卡的大小

---

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

所以我找到了答案，但除非有人有更好的想法，否则我不会去标记它（Stackblitz链接：）

---

所以我找到了答案，但除非有人有更好的想法，否则我不会去标记它（Stackblitz链接：）

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