CSS / Javascript框架，适合在一个屏幕上的图片

Question

我正在尝试在一个HTML页面中放入3张图片，这样就可以使用最大的屏幕区域，而无需滚动。当屏幕尺寸改变时，应重新排列图片，覆盖最大屏幕区域。每张图片都有不同的尺寸。为了更容易安装，每个pic都可以裁剪（最大比例为2：3）。布局应该流畅且反应灵敏。见下面的例子

我正在考虑的两个框架是Twitter Bootstrap和jQuery Masonry，但这些都没有解决适合的问题。

目前我解决了这个问题，用css制作方形缩略图并重叠这些图片，但是用户希望看到整个图片没有重叠并且尽可能大：

!

您可以在vash.co

看到它的实际效果

Answer 1

使用纯CSS可以非常接近。举个例子，在谷歌浏览器中试用：http://jsbin.com/ixomav/1（source）

这很粗糙，但它应该得到这个想法。更进一步，您可以添加js代码来调整具有适当宽高比的图像，或者继续尝试使用仅css方法。我使用维基百科中的随机图片作为我的例子，但如果你的所有照片尺寸相同，你可能会更容易。

如果移除高度，您将获得正确的图像，但问题是空白区域，例如：http://jsbin.com/ixomav/2

结帐Isotope：http://isotope.metafizzy.co/demos/images.html