具有不同大小離子圖像的卡片

我正在使用卡片來顯示圖像。我連續顯示兩個或三個圖像。連續的圖像數量可能會發生變化。圖像的大小不同。他們沒有相同的高度和寬度。正因爲如此，卡的高度也在變化。具有不同大小離子圖像的卡片

即使圖像尺寸不同，我也希望所有卡都具有相同的高度。當我們拖動屏幕尺寸時，圖像和卡片的高度和寬度應以相同的比例改變。

我試着將每張卡的高度固定在一個固定的百分比高度。我也玩過定位卡片和圖片。但是當我再次拖動屏幕時，圖像或卡片高度不會以相同的比例變化。它應該具有相同的卡片高度，而不管卡片中的設備或瀏覽器或圖像如何。

的代碼是這樣的

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

具有不同大小離子圖像的卡片

回答

相關問題