響應略圖網格與垂直居中的圖像和水平廣場1：1集裝箱

Question

我試圖創建具有以下要求的響應格縮覽圖：

• 縮略圖膨脹和收縮響應
• 個人縮略圖容器是正方形1：1點的縱橫比
• 個人的縮略圖圖像可以在縱橫比變化，但平方縮略圖容器

內被水平地以及垂直居中

您可以在我的網站http://www.artrogue.com/collections/all上看到無響應的版本。再次，這是有效的，因爲我已經定義了1：1方形容器的高度和寬度。

使用響應，我們無法定義方形容器的高度，因爲寬度會發生變化。高度是一個移動的目標。

我不確定這是否可以用CSS完成，但我不介意使用一些jQuery或JavaScript。

Answer 1

如果你能找到一種方法，通過編程添加空格給他們，讓您的圖像廣場，例如，那麼你可以使用此解決方案：http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/

我想你也可以調整比例的保證金，如果你知道你的圖像是縱向還是橫向，縱橫比是相同的。

除此之外，我也有類似的問題：https://stackoverflow.com/questions/13905116/horizontally-and-vertically-center-text-inside-fluid-square-grid