如何仅使用CSS创建方形图像缩略图

Question

在网页上，我正在渲染图像集。有些图像是纵向，有些是横向，所有图像都大于所需的渲染尺寸。

我希望将这些图像显示在整齐，大小合适的方形缩略图库中。

我怎么能这样只使用CSS？

如果可能，我想避免使用JavaScript库。我不需要选择要显示的图像的一部分，只需选择任何中心方形区域。

我已经在其他地方看到过这个问题了，但是还没有找到一个似乎适用于所有方向的答案（例如，肖像可能会被正确裁剪/调整大小，景观不会）。

Answer 1

您仍然可以使用服务器端技术通过cURL调整图像大小;然而，这既不是在这里也不是在那里。有一点需要理解，CSS并不是一种真正的编程语言，因为它无法做出决策或进行任何真正的数学运算，因此我们无法用CSS做出动态决策。

话虽这么说，你可以为你的画廊创建div，并使用CSS将背景图像设置为所需的图像。在CSS3中有一个名为background-size的属性。您可以手动设置像素大小，但不会保持纵横比，因此可能看起来很糟糕。设置background-size: cover将缩放图像，使其完全填满背景区域，同时切掉多余部分。设置background-size: contain将缩放图像，使其保持原始宽高比并填充背景而不会切断图像。这是一个小代码，解释了如何使用它。 jsFiddle

编辑：我忘了提到这个解决方案只适用于IE9 +（在FF，Chrome和Safari中应该可以正常工作）

Answer 2

我建议用div包装图像。您可以使用overflow:hidden在此包装器上指定宽度和高度。