响应式缩略图网格，图像以方形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