CSS/Javascript 框架，将图片放在一个屏幕上答案

【问题标题】：CSS/Javascript Framework that fits pictures in one screenCSS/Javascript 框架，将图片放在一个屏幕上
【发布时间】：2023-03-23 10:40:01
【问题描述】：

我试图在一个 HTML 页面中放置 3 张图片，这样将使用最大屏幕区域，而无需滚动。当屏幕尺寸发生变化时，图片应该重新排列，覆盖最大的屏幕区域。每张图片都有不同的尺寸。为了更容易拟合，可以裁剪每张图片（最大比例为 2:3）。布局应该流畅且响应迅速。请参阅下面的示例

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

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

你可以在vash.co看到它的实际应用

【问题讨论】：

【解决方案1】：

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

这很粗略，但应该可以理解。更进一步，您可以添加 js 代码以调整具有适当纵横比的图像大小，或者继续尝试仅使用 css 的方法。我使用来自维基百科的随机图片作为示例，但如果您的所有照片尺寸相同，您可能会更轻松。

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

【讨论】：