css - 在方形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