引導3：在不同高度顯示相同高度的圖像

我設計了一個使用bootstrap的圖像網格，使用360px正方形或360px高720px寬的圖像。出於某種原因，寬幅圖像在行中顯示較高。任何想法爲什麼發生這種情況，以及如何解決它？引導3：在不同高度顯示相同高度的圖像

謝謝！

，這是有幫助的。儘管調整圖像高度看起來很不起眼，但它可能是最簡單的方法。 – mast3rd3mon

圖像不會顯示在相同的高度，只是因爲它們具有相同的物理高度，因爲它們會隨着佈局縮放。每列中的填充和列中的元素減少了圖像的可用水平空間，並且當水平尺寸改變時，垂直尺寸也將改變（以適當地縮放圖像）。

看看左/寬圖像是如何在一列中顯示的，但右圖中的兩張圖像是在兩列中。右側的2幅圖像比左側的圖像填充更多（兩倍的填充，因爲有兩倍的圖像）。這是縮放每個的高度比左側的圖像短。

我從.col-*類和.thumbnail中刪除了填充以表明如果刪除這些圖像，圖像將排列齊全。

你會解決這個問題的任何數量的方式，但我認爲需要由你來這是怎麼回事，以最適合您的佈局。最簡單的方法可能只是改變左側圖像的高度來考慮該填充。 720x341似乎是在那裏工作的決議。

這似乎是縮放圖像降一點，根據樣本

2017-04-21 16:06:00

感謝 –

@Martin對此有何評論？以某種方式必須抵消空間。這不是哈克，它是數學:) –

好點。我的想法是，調整窗口大小時可能並不完美，但看起來很好。再次感謝！ –

回答