javascript - 在 CSS 或 JS 中使不同大小的图像适合画廊的缩略图

Question

不确定我的问题是否解释得很好。

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

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

我希望我的画廊看起来像这样:

当您单击图片时，它们会以完整尺寸打开。我可以做这部分并让它们以全尺寸打开，但我的问题是试图让这两个不同尺寸的图像在盒子布局中看起来正确。

当使用 1 尺寸时，我可以使它们具有固定的宽度和高度，然后只需隐藏叠加层即可使它们均为方形。然而，当我将其他图像尺寸引入混合时，图像开始看起来被拉伸(stretch)了。

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

Answer 1

尝试添加

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

}