离子中具有不同大小图像的卡片

Question

我正在使用卡片来显示图像.连续我显示两个或三个图像.一行中的图像数量可以改变.图像的大小不同.它们的高度和宽度不同.因此,卡片高度也在变化.

即使图像尺寸不同,我希望所有卡都具有相同的高度.当我们拖动屏幕尺寸时,图像和卡片的高度和宽度应以相同的比例变化.

我尝试将每张卡的高度固定为固定高度的百分比.我也玩卡片和图像.但是当我再次拖动屏幕时,图像或卡片高度不会以相同的比例变化.无论设备或浏览器或卡中的图像如何,它都应具有相同的卡高.

代码是这样的

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

请看一下codepen

有人可以帮我吗？

Answer 1

我和你的CSS玩了一下.

尝试将此代码添加到您的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;
}

这里有前缀的codepen http://codepen.io/vkjgr/pen/jPwqMx

希望有所帮助;)