将固定网格重新制作为响应式网格答案

【问题标题】：Remaking fixed grid to a responsive grid将固定网格重新制作为响应式网格
【发布时间】：2013-09-20 11:16:47
【问题描述】：

我已经实现了这个固定网格：http://jsfiddle.net/challenger/UxzCa/1。有两个要求：

图片应该适合正方形 card div（宽度/高度可以不同）；
不应固定卡片尺寸。

至于尺寸，可以使用 jquery 实现并在 window.resize 事件上重新计算宽度/高度。有其他方法吗？

【问题讨论】：

如果卡片尺寸不固定，每行要多少张卡片，还是要给卡片设置最小宽度？
我一直在考虑放 6 到 8 张牌。或者在任何给定的 N 处动态重新计算宽度。

标签： javascript jquery css grid responsive-design

【解决方案1】：

我有一个解决图像纵横比问题和固定宽度问题的部分解决方案。

对于固定宽度的网格，设置width: auto，这将允许浮动根据需要换行：

.grid-row {
    width: auto;
    margin: 0 auto;
}

如果图像是纵向的（高度/宽度> 1），则图像需要随高度缩放，如果是横向的（高度/宽度

定义以下类：

.table-cell img.portrait {
    height: 100%;
}
.table-cell img.landscape {
    width: 100%;
}

然后使用下面的jQuery方法根据每张图片的宽高比设置正确的类：

$('.table-cell').each(function(){
    var image = $(this).find('img');
    aspectRatio = image.height()/image.width();
    if (aspectRatio > 1) 
    {
        image.addClass('portrait');
    }
    else
    {
        image.addClass('landscape');
    }
});

See Demo Fiddle

脚注

使用类似于以下问题中介绍的一些 CSS 技术，可以使 .card 元素响应并保持其纵横比：

How do you vertically center absolute positioned text w/o declaring container size and w/o JS?

【讨论】：