离子中具有不同尺寸图像的卡片

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

希望有所帮助；）