Css ionic中具有不同大小图像的卡

我用卡片来显示图像。我连续展示了两三张图片。一行中的图像数量可以更改。图像的大小是不同的。它们没有相同的高度和宽度。因此，卡的高度也在变化

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

我试着将每张卡片的高度固定在一个固定的百分比高度。我还玩了定位牌和图像的游戏。但当我再次拖动屏幕时，图像或卡片高度不会以相同的比例变化。无论卡中的设备、浏览器或图像如何，它都应具有相同的卡高度

代码是这样的

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

这里有卡片内容
这里有卡片内容
这里有卡片内容
这里有卡片内容
这里有卡片内容

请看一下这本书

---

有人能帮我吗？

我对你的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;
}

这里有前缀代码笔

---

希望有帮助；）

一切看起来都很好。但是，如果我有小图像，卡没有完全对齐。我在“.card”类中添加了一个css行

宽度：100%

，一切看起来都很好。如果要查看上述场景，请打开

http://codepen.io/rajeshwarpatlolla/pen/pJwEVW

并从“.card”类中删除

宽度：100%

，您将看到问题。如果我们有宽度：100%到“.card”类，那么它看起来很好。请将这行css添加到您的答案以及您的代码笔中。我会接受这个答案。因为人们可能会引用这个解决方案，所以他们应该有完美的解决方案。最后谢谢你的解决方案。我又解决了一个问题。所有的卡片和所有的行的高度都不相等。每行的卡片高度相同，但一行中的卡片高度根据该行的图像高度而变化。如果我们可以使所有行中的所有卡都具有相同的高度，那就更好了。好：）我在sample和codepen中添加了width属性。你能使所有行中的图像都具有相同高度的卡吗？