Geek Answers Handbook

Cards with images of different sizes in ionic

I use maps to display images. In the line I show two or three images. The number of images per line may vary. Image sizes vary. They do not have the same height and width. Because of this, the height of the map also increases.

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

I tried to set the height of each card to a fixed height in percent. I played with positioning cards and images. But when I drag the screen again, the image or the height of the map does not change in the same proportion. It must have the same height of the map, regardless of the device or browser or images on the map.

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 see codepen

Can someone help me with this?

+4
source share
1 answer

I played a little with your css.

Try adding this code to 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;
}

The codepen prefix is ​​here http://codepen.io/vkjgr/pen/jPwqMx

Hope that helps;)

+7
source

More articles:


All Articles