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

Question

不知道我的问题能否很好地解释这一点。

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

1）-1200 x 1800 px 2）-1200 x 800 px

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

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

当使用1尺寸时，我可以将它们设置为固定的宽度和高度，然后将其隐藏起来以使其全部为正方形。 但是，当我将其他图像尺寸引入混合时，图像开始显得有些拉长。

有谁知道我如何使用纯CSS或Javascript / jQuery实现此目的？

Answer 1

尝试添加

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

}

Answer 2

试试这个代码

 .panel-block { float: left; width: 100%; } .panel-img { float: left; width: calc(100%/3 - 20px); height: 141px; overflow: hidden; margin: 10px; display: flex; align-items: center; background-color: #c5c5c5; } .panel-img img { width: 100%; } 

 <div class="panel-block"> <div class="panel-img"> <img src="https://dummyimage.com/1200x1800/ddd/fff"/> </div> <div class="panel-img"> <img src="https://dummyimage.com/1200x800/ddd/fff"/> </div> <div class="panel-img"> <img src="https://dummyimage.com/1200x800/ddd/fff"/> </div> <div class="panel-img"> <img src="https://dummyimage.com/1200x1800/ddd/fff"/> </div> <div class="panel-img"> <img src="https://dummyimage.com/1200x1800/ddd/fff"/> </div> <div class="panel-img"> <img src="https://dummyimage.com/1200x800/ddd/fff"/> </div> </div> 

Answer 3

我认为解决此问题的最佳方法是为图像生成方形缩略图。 您不需要怪异的JS / CSS，一切都变得更简单，并且避免直接在图库中加载完整尺寸的图像（这样，每个拥有数据计划的人都会很高兴，并且页面加载速度会更快）