목록이 다양한 종횡비를 사용하는 고정 높이 갤러리

Question

HTML 및 CSS를 사용하여 Wordpress에서 이미지 갤러리를 만들면 여러 종횡비가 스크롤바와 나란히 표시됩니다. 다양한 너비의 컨테이너 높이를 유지하기를 원합니다.

갤러리는 목록을 사용하여 나란히 표시합니다.

나는 이것이 최선의 선택이라고 생각했지만 이미지 크기를 조작하는 데 어려움을 겪고있어 일관된 높이를 유지하고 있습니다.

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; 
}