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

我正在使用卡片来显示图像。我连续显示两个或三个图像。连续的图像数量可能会发生变化。图像的大小不同。他们没有相同的高度和宽度。正因为如此，卡的高度也在变化。具有不同大小离子图像的卡片

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

我试着将每张卡的高度固定在一个固定的百分比高度。我也玩过定位卡片和图片。但是当我再次拖动屏幕时，图像或卡片高度不会以相同的比例变化。它应该具有相同的卡片高度，而不管卡片中的设备或浏览器或图像如何。

的代码是这样的

<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

可有一个人帮我在这？

来源

2015-06-10 Rajeshwar

我玩了一下你的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

希望帮助;）

来源

2015-06-10 13:40:23

一切正常。但是，如果我有小图像，卡没有完美对齐。我在'.card'类中添加了一个css行'width：100％'，并且一切都很好。如果你想看到上面的场景，打开'http：// codepen.io/rajeshwarpatlolla/pen/pJwEVW'并从'.card'类中移除'width：100％'，你会看到这个问题。如果我们将'width：100％'设置为'.card'类，那么它看起来很好。请将这一行的CSS添加到您的答案以及您的codepen。我会接受这个答案。因为人们可能会提到这个解决方案，所以他们应该有完美的解决方案最后感谢您的解决方案。 – Rajeshwar

我想出了一个问题。所有行的所有卡都不是相同的高度。每行的卡片高度相同，但一行中卡片的高度根据该行的图像高度而变化。如果我们可以在所有的高度相同的行中制作所有的卡片，那可能会更好。 – Rajeshwar

好:)我将宽度属性添加到样本和codepen。 –

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

回答

相关问题