css - ionic 中具有不同尺寸图像的卡片

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

希望对您有所帮助 ;)