使不同大小的圖像適合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，一切都變得更簡單，並且避免直接在圖庫中加載完整尺寸的圖像（這樣，每個擁有數據計划的人都會很高興，並且頁面加載速度會更快）