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

此处加前缀的代码簿http://codepen.io/vkjgr/pen/jPwqMx

希望有所帮助;）

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

1 个答案: