CODEWITHSUNDEEP
htmlcsswordpressgallery
Chris Milne
Chris Milne

Reputation: 3

Fixed height gallery using a list - varying aspect ratios

I'm creating an image gallery in Wordpress using HTML and CSS to display several images with different aspect ratios side-by-side with a scrollbar. I want them to maintain the height of the container with varying widths.

The gallery is created using lists to display them side-by-side.

I thought this was the best option but I'm having difficulties manipulating the image sizes so they are consistent heights.

HTML Below & CSS further down

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

Upvotes: 0

Views: 382

Answers (1)

Amr Labib
Amr Labib

Reputation: 4083

Try the css below using object-fit:

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

Upvotes: 0

Related Questions