Cards with different size images in ionic

Question

I am using cards to display images. In a row i am showing two or three images. The number of images in a row can change. The sizes of images are different. They don't have same height and width. Because of this, the card height is also changing.

I want to have same height for all the cards even though the image sizes are different. And when we drag screen size the images and cards height and width should change in the same proportion.

I tried fixing the height of each card in to a fixed height in percentages. I played with positioning the cards and images also. But when i drag the screen again the image or the card height is not changing in the same proportion. It should have same card height irrespective of the device or browser or images in the card.

The code is like this

<div class="row">
  <div class="col-50">card content here</div>
  <div class="col-50">card content here</div>
</div>
<div class="row">
  <div class="col-33">card content here</div>
  <div class="col-33">card content here</div>
  <div class="col-33">card content here</div>
</div>

Please have a look at the codepen

Can some one help me on this?

Answer 1

I played a bit with your css.

Try adding this code into your css:

.col-50, .col-33 {
  display: flex;
}
.card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.item-avatar, .item.tabs {
  flex: 0 0 auto;
}
.item-body {
  flex: 1 1 auto;
}

Prefixed codepen here http://codepen.io/vkjgr/pen/jPwqMx

Hope that helps ;)