3

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

在此处输入图像描述

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

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

裁剪为正方形,例如 vash.co

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

4

1 回答 1

2

You can get pretty close using pure CSS. Take this example, try it in Google Chrome: http://jsbin.com/ixomav/1 (source)

It's pretty crude but it should get the idea across. Going furthur you could add js code to resize images with a proper aspect ratio or keep trying with a css only approach. I used random images from wikipedia for my example but you may have an easier time if all your photos are the same dimensions.

If you remove the height you'll get properly aspected images but the problem with that is the white space, example: http://jsbin.com/ixomav/2

Check out Isotope: http://isotope.metafizzy.co/demos/images.html

于 2012-10-09T01:54:50.387 回答