リストが変化するアスペクト比を使用した固定高さギャラリー

Question

WordpressでHTMLとCSSを使用して画像ギャラリーを作成して、アスペクト比が異なる複数の画像をスクロールバーと並べて表示します。私は彼らにさまざまな幅でコンテナの高さを維持してもらいたい。

ギャラリーはリストを使用して並べて表示されます。

私はこれが最善の選択だと思っていましたが、イメージのサイズを操作するのが難しく、一貫した高さです。

HTMLさらに下CSS &下

<div class="image-cont"><ul><li class="vt-image"><img 
src="https://standleyonline.com/wp- 
content/uploads/2017/09/fullsizerender3.jpg"></img></li><li class="vt-image"> 
<img src="https://standleyonline.com/wp- 
content/uploads/2017/09/fullsizerender1.jpg"><img></li><li class="hz-image"> 
<img src="https://standleyonline.com/wp- 
content/uploads/2017/09/standley3910.jpg"></img></li><li class="vt-image"><img 
src="https://standleyonline.com/wp- 
content/uploads/2017/09/fullsizerender1.jpg"><img></li></ul></div> 

CSS

.image-cont div { 
max-width: 100%; 
overflow: auto; 
white-space: nowrap; 
overflow-x: scroll; 
} 

.image-cont ul { 
    overflow: auto; 
white-space: nowrap; 
} 

.image-cont li { 
max-width: 33vw; 
list-style: none; 
display: inline-block; 
} 

.image-cont img { 
max-height: 100%; 
clear:both; 
} 

Answer 1

object-fitを用いて、以下のCSSを試してみてください：

.image-cont div { 
    max-width: 100%; 
    overflow: auto; 
    white-space: nowrap; 
    overflow-x: scroll; 
} 

.image-cont ul { 
    overflow: auto; 
    white-space: nowrap; 
    height:400px; 
} 

.image-cont li { 
    display:inline-block; 
    height:100%; 
    list-style: none; 
} 

.image-cont img { 
    height:100%; 
    object-fit:contain; 
}