html - 如何仅使用 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 中应该工作正常)