CSS 照片库调整帮助

Question

我一直在尝试 CSS 照片库示例 here 来设置我自己的 (here is the code)。一切正常，除了：

(1) 使用 px 中的绝对度量设置 div。我发现不得不调整我的照片大小和调整以适应它们是令人沮丧的。相反，有没有办法设置画廊的所有尺寸（通过 CSS），例如以 % 或 em 为单位，以便画廊适应我放入其中的图像，并动态适应视口大小浏览器？

(2) 我尝试将自己的照片添加到图库，但如果我的照片尺寸与 div 的尺寸不匹配，它们就会溢出。有没有办法指定更大的图像来改变它们的大小来填充它们的容器，并保持它们的纵横比？

谢谢。

Answer 1

(1) 我不会以 % 来设置整个画廊，也不会动态缩放它以适应浏览器。这可能会导致意想不到的结果和问题。要将图像放入 div 中，您可以使用 imagemagick 设置 bash 脚本来调整所有图像的大小。 （甚至您的服务器也可以为您执行此操作。如果您使用的是 Windows，则有一些程序可以批量调整图像大小，例如 Shrink-O-Matic。）

(2) 您可以设置一个固定的高度或宽度（仅其中一个）以将图像置于固定尺寸。然后浏览器将按比例缩放图像以适合该值。 CSS 看起来像这样：

#container .pics span img {height: 400px;}

应该可以的。

如果您真的想要一个“缩放”到浏览器大小的画廊，您可能不得不四处寻找另一个画廊。那里有数千个，根据您的需要修改这个将是很多工作。

祝你好运。