1

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

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

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

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

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

4

1 回答 1

0

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

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

除此之外，我有一个类似的问题：https ://stackoverflow.com/questions/13905116/horizo​​ntally-and-vertically-center-text-inside-fluid-square-grid

于 2012-12-16T20:21:48.107 回答