显示宽度和高度固定的图像，没有扭曲/扭曲

Question

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

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

我想要做的是显示图像，每个图像都具有相同的宽度和高度，但不会使它们变形。

现在我的css是

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

但显然这会导致图像被扭曲出正常尺寸。

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

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

提前致谢！

Answer 1

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

或在图像周围创建div，高度为100px，宽度为100px。