javascript - 显示具有固定宽度和高度的图像而不会变形/扭曲

Question

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

图像的形状和大小各不相同。

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

现在我的CSS是

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

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

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

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

提前致谢!

Answer 1

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

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