显示具有固定宽度和高度的图像而不会翘曲/扭曲

Question

我的网站上有一个页面，它从数据库中获取大量图像并将它们放入网格中。

图片都是不同的形状和大小。

我想要做的是显示图像，每个图像具有相同的宽度和高度，但不会扭曲。

现在我的 CSS 是

.image{
 width:100px;
 height:100px
}

但这显然会导致图像超出正常尺寸。

我不能只设置高度或宽度，因为我想用图像填充整个 100x100 像素块。

我想我需要创建一些东西来从原始图像中制作新的图像缩略图。将图像文件复制到服务器时，我是否必须实际编辑它们？或者是否有一些我可以做的 javascript 可以显示这样的图像。

提前致谢！

Answer 1

.image{
min-height:100px;
height:100px;
min-width:100px;
width:100px;
}

或者在图片周围创建高100px宽100px的div。