title: How to adjust cards with different image size but keep cards size
body: <p>I have svg images which each has different sizes, but the end result that I"m looking for, is, same card size for all cards, and the remaining space - give it to the image.</p>
  
  <p>The image should fill the height with the remaining height, the width can stay "auto" <strong>OR</strong> image with 50px for example but have it <code>vertical-align: middle</code> it ( the Ionic helpers doesn't work here .. )</p>
  
  <p>I have this stackblitz example: <a href="https://ionic-qdmmmw.stackblitz.io" rel="nofollow noreferrer">https://ionic-qdmmmw.stackblitz.io</a></p>
  
  <h3>home.ts</h3>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;Ionic 2 - cards with different img size but same card size&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding&gt;
  &lt;ion-row&gt;  
     &lt;ion-col col-4&gt;
    &lt;ion-card style="border: green 2px solid;"&gt;
      &lt;img 
        style="height: 40px; width: auto;"
        src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/&gt;
      &lt;ion-card-content style="padding: 0; background-color: yellow;"&gt;
        &lt;ion-card-title style="background-color: red"&gt;
          Nine Inch Nails Live
          &lt;/ion-card-title&gt;
        &lt;p&gt;
          The most popular industrial group ever, and largely
          responsible for bringing the music to a mass audience.
        &lt;/p&gt;
      &lt;/ion-card-content&gt;
    &lt;/ion-card&gt;
     &lt;/ion-col&gt;
  
     &lt;ion-col col-4&gt;
    &lt;ion-card style="border: green 2px solid;"&gt;
      &lt;img 
        style="height: 20px; width: auto;"
        src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/&gt;
      &lt;ion-card-content style="padding: 0; background-color: yellow;"&gt;
        &lt;ion-card-title style="background-color: red;"&gt;
          Nine Inch Nails Live
          &lt;/ion-card-title&gt;
        &lt;p&gt;
          The most popular industrial group ever, and largely
          responsible for bringing the music to a mass audience.
        &lt;/p&gt;
      &lt;/ion-card-content&gt;
    &lt;/ion-card&gt;
     &lt;/ion-col&gt;
  &lt;/ion-row&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>Couple of issues I have with the example above:</p>
  
  <ul>
  <li>The footer( <code>ion-card-title</code> ) is not sticked to the bottom ( when fixing the cards with with setting the <code>ion-col</code> with <code>style='display: flex'</code></li>
  <li>Image size affect card size</li>
  </ul>
  
  <p>Tried many things, but still didn't get the right results ... any ideas ?</p>