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

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

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

我怎样才能只使用CSS呢

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

---

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

我建议使用div包装图像。您可以使用

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

也就是说，您可以为您的图库创建div，并使用CSS将背景图像设置为所需的图像。在CSS3中有一个名为
背景大小
的属性。您可以手动设置以像素为单位的大小，但这样就无法保持纵横比，因此看起来可能很糟糕。设置
背景尺寸：封面
将缩放图像，使其完全填充背景区域，同时切断多余部分。设置
background size:contain
将缩放图像，使其保持原始纵横比，并在不切断图像的情况下填充背景。这里有一个小代码，可以解释如何使用它

编辑：我忘了提到这个解决方案只适用于IE9+（在FF、Chrome和Safari中应该可以很好地工作）
这可以帮助您：只使用CSS创建缩略图通常是个坏主意。浏览器仍然需要下载完整大小的图像，然后动态缩小它。你应该考虑使用一种服务器端语言，这种语言实际上可以动态调整图像大小，以保持尽可能快的下载速度。谢谢@FireCrakcer37，不幸的是，这些图像来自外部API，因此我没有服务器端控件。谢谢这些伟大的建议。因此，为了确认，不可能直接在图像标签上调整图像的大小？我必须使用一个封闭的div和/或应用图像作为背景？通过使用
图像
标记来获得所需的结果不是很容易。如果所有的图像都是横向的或纵向的，这是可能的，但是由于您将两者混合在一起，因此很难改变图像以真正满足您的需要。有什么特别的原因让你想使用图像标签吗？使用这种方法，你只能捕获图像的左上角部分，除非你对原始图像（仍然是全尺寸）应用一些定位技巧，将图像的中心移动到可见区域（这是一个很好的解决方案，虽然不是我最初想到的，但它很好地完成了这项工作。谢谢！