Javascript 使不同大小的图像适合CSS或JS中的图库缩略图

不确定我的问题是否能很好地解释这一点

我有一个网站，需要在图库中显示我的所有图像。问题是，我有两种类型的图像大小是一致的

1） -1200 x 1800像素 2） -1200 x 800像素

我希望我的图库与此相似：

当你点击图像时，它们会以其全尺寸打开。我可以做这部分，并使它们以全尺寸打开，但我的问题是试图让这两个不同尺寸的图像在框布局中看起来正确

当使用1号时，我可以使它们具有固定的宽度和高度，然后只需隐藏覆盖层，使它们都呈方形。但是，当我在混合中引入其他图像大小时，图像开始看起来拉伸

有人知道我如何使用纯CSS或Javascript/jQuery实现这一点吗？

尝试添加

#your_gallery img {
     max-width: 30%;
     margin: 15px 1.5%;
     min-height: 180px;
     max-height: 180px;

}

---

尝试此代码

。面板块{
浮动：左；
宽度：100%；
}
.仪表盘img{
浮动：左；
宽度：计算（100%/3-20px）；
高度：141px；
溢出：隐藏；
利润率：10px；
显示器：flex；
对齐项目：居中；
背景色：#C5C5；
}
.面板img img{
宽度：100%；
}

---

我认为解决这个问题的最佳方法是为图像生成方形缩略图。

---

你不需要奇怪的JS/CSS，一切都很简单，你可以避免直接在图库中加载全尺寸的图像（这样每个有数据计划的人都会很高兴，页面的加载速度会快得多）

你可以通过将面板创建为固定大小的

div

元素来实现这一点。然后，您可以使用

背景图像

设置图像，并将

背景大小

设置为

封面

或

包含

，具体取决于您的要求。如果可能的话，我更愿意显示图像，而不使用css背景，但是更多的工作和更慢的处理，因为您需要在JS中完成，而前面的只是CSS