在一个网页上，我正在渲染图像的集合。有些图像是纵向的，有些是横向的，所有的图像都大于所需的渲染尺寸。
我想把这些图片显示在一个整齐的、统一大小的正方形缩略图中。
我如何只用CSS做到这一点?
如果可能的话，我想避免使用javascript库。我不需要选择图像的一部分来显示，只需要选择任何中间的正方形区域。
我在其他地方见过这个问题，但还没有找到一个答案，似乎与所有方向(例如，肖像可以得到正确裁剪/调整大小，风景没有)。
你仍然可以使用服务器端技术通过cURL来调整图像的大小;然而，这既不是这里也不是那里。需要理解的一点是，CSS不是一种真正的编程语言，也就是说，它不能做决策或做任何真正的数学运算，所以我们不能仅仅用CSS来做动态决策。
也就是说，您可以为您的图库创建div，并使用CSS将背景图像设置为所需的图像。在CSS3中有一个属性叫做background-size。您可以手动设置像素大小，但它不会保持长宽比的方式，所以它可能看起来很糟糕。设置background-size: cover将缩放图像，使其完全填充背景区域，同时切断多余的部分。设置background-size: contain将缩放图像，使其保持其原始长宽比，并填充背景而不切断图像。这里有一小段代码，解释了如何使用它。jsFiddle
编辑:我忘了说这个解决方案只适用于IE9+(应该在FF, Chrome和Safari中工作良好)
我建议使用div包装图像。您可以使用overflow:hidden在此包装器上指定宽度和高度。