0

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

  • 图像应适合方形 carddiv（宽度/高度可以不同）；
  • 卡片尺寸不应该是固定的。

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

4

1 回答 1

1

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

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

.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');
    }
});

见演示小提琴

脚注

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

如何在没有声明容器大小和没有 JS 的情况下垂直居中绝对定位文本？

于 2013-09-20T11:46:12.867 回答