响应式缩略图网格，图像在方形 1:1 容器中垂直和水平居中答案

【问题标题】：Responsive Thumbnail Grid with Images Centered Vertically and Horizontally in Square 1:1 Container响应式缩略图网格，图像在方形 1:1 容器中垂直和水平居中
【发布时间】：2012-10-02 07:02:21
【问题描述】：

我正在尝试创建具有以下要求的响应式缩略图网格：

缩略图响应式扩展和收缩
各个缩略图容器是正方形的 1:1 纵横比
各个缩略图图像的纵横比可能不同，但在方形缩略图容器中水平和垂直居中

您可以在我的网站http://www.artrogue.com/collections/all 上查看非响应版本。同样，这是因为我已经定义了 1:1 方形容器的高度和宽度。

使用响应式我们无法定义方形容器的高度，因为宽度会发生变化。高度是一个移动的目标。

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

【问题讨论】：

标签： css thumbnails responsive-design

【解决方案1】：

如果您能找到一种方法使您的图像变成方形，例如通过编程方式向它们添加空白，那么您可以使用此解决方案：http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/

如果您知道您的图像是纵向还是横向并且纵横比相同，我认为您也可以按百分比调整边距。

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

【讨论】：