2

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

我想在整齐、大小一致的方形缩略图库中显示这些图像。

我怎么能这样做只使用CSS？

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

我在其他地方看到过这个问题，但尚未找到似乎适用于所有方向的答案（例如，肖像可能会正确裁剪/调整大小，而风景则不会）。

4

2 回答 2

6

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

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

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

于 2013-05-14T04:07:13.347 回答
1

我建议让一个 div 包装图像。您可以使用overflow:hidden.

于 2013-05-14T02:41:24.557 回答