Question

我有svg图像，每个图像都有不同的尺寸，但我要查找的最终结果是，所有卡片的卡片大小相同，剩余空间 - 将其提供给图像。

图像应该用剩余的高度填充高度，宽度可以保持＆＃34;自动＆＃34; OR 图片，例如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链接：https://stackblitz.com/edit/ionic2-cards-with-different-image-size-but-keep-cards-height）

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

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

home.ts

1 个答案: