javascript - 将固定网格改造为响应式网格

Question

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

• 图像应适合正方形 card div(宽度/高度可以不同)；<
• 卡片尺寸不应固定。

至于维度，可以使用 jquery 实现并在 window.resize 事件中重新计算宽度/高度。有替代方法吗？

Answer 1

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

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

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

如果是纵向图像(高度/宽度 > 1)，图像需要随高度缩放；如果是横向图像(高度/宽度 < 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?