Vfrdtyky

I am trying to create an image gallery with CSS, organized this way:

I load every image of a folder using PHP, and create elements I call rows containing the same number of pictures (4 in my case, aligned vertically). Those rows are aligned horizontally.
I would like those rows/columns to adjust their width until they occupy all the vertical space available so that if I have 4 vertical images, the row appears thinner, and if I have 4 landscape format images, the row is wider horizontally. See illustration:

Right now I just have something like this:

If there are too many rows, I just make a horizontal scrolling bar to the right.

My html code is the following:

<div class="gallery">

    <div class="row">

        <div class="frame">

            <img class="gallery-img">

        </div>

        <div class="frame">

            <img class="gallery-img">

        </div>

        <div class="frame">

            <img class="gallery-img">

        </div>

        <div class="frame">

            <img class="gallery-img">

        </div>

    </div>

    <!-- other rows -->

</div>

And my CSS is the following:

body {

background-color: #dddddd;

}



.gallery {

    width: 100%;

    overflow: auto;

    height: 100%;

    display: flex;

    flex-wrap: nowrap;

}



.row {

    display: flex;

    flex-direction: column;

    height: 100%;

    flex-wrap: nowrap;

    align-content: stretch;

    align-items: stretch;

    justify-content: space-around;

}



.frame {

    margin: 2px;

    overflow: hidden;

    display: flex;

    align-items: center;

    align-content: center;

    justify-content: center;

    box-shadow: inset 5px 5px 40px rgba(0,0,0,0.6);

    -webkit-transition: box-shadow;

    transition: all 0.5s ease;

}



.frame:hover {

    box-shadow: inset 3px 3px 10px rgba(0,0,0,0.6);

}



.gallery-img {

    -webkit-transition: transform;

    transition: all 0.5s ease;

    transform: scale(1);

    position: relative;

    z-index: -1;

}



.frame:hover .gallery-img {

    transform: scale(1.1);  

}

I don't know if flex-grow would be the solution here. I have read about properties to auto-fit or auto-fill, but I am not sure how or where to use this. I hope this has not been answered somewhere else but I could not manage to find a similar topic. The thing is I need to keep images ratio, not just to fill the empty space.

Thank you in advance for your help!

You could use some Javascript to get the height of the images once they load and then calculate what fraction the of the viewport each .frame element should take up.

See the demo below with documenation in the comments:

window.addEventListener("load", () => {

  const rows = document.querySelectorAll(".row");



for(let row of rows) {

  const frames = row.querySelectorAll(".frame");

  const imgs = row.querySelectorAll("img");

  

  // calculate the sum of heights of all the img elements in a row

  const totalHeight = Array.prototype.reduce.call(imgs, (a, img) => Number(img.naturalHeight) + a, 0);

  

  // sets the height of each frame 

  for( let frame of frames) {

    let imgOfFrame = frame.querySelector("img");

    let fractionForFrame = imgOfFrame.naturalHeight / totalHeight * 100;

    

    

    frame.style.height = fractionForFrame + "vh";

  }

}

});

body {

margin: 0;

padding: 0;

}



.gallery {

  display: flex;

  overflow-x: scroll; /* make the the gallery scrollable*/

}



.row {

  margin-right: 20px;

  flex-shrink: 0; /* make sure the flex items do not shrink*/

}



.row:last-child {

  margin-right: 0;

}



.frame {

  box-sizing: border-box;

  padding: 10px 0; /*creates vertical spacing between images*/

}



.frame img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover; /*keeps the image from being distorted if the aspect ratio is off*/

}

<div class="gallery">

  <div class="row">

    <div class="frame"><img src="https://via.placeholder.com/200x400" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/200x50" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/200x300" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/200x100" alt=""></div>

  </div>

  <div class="row">

    <div class="frame"><img src="https://via.placeholder.com/400" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/400" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/400x200" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/400x800" alt=""></div>

  </div>

  <div class="row">

    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>

  </div>

  <div class="row">

    <div class="frame"><img src="https://via.placeholder.com/200x200" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/300x400" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/300x200" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/300x100" alt=""></div>

  </div>

   <div class="row">

    <div class="frame"><img src="https://via.placeholder.com/500x400" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/500x300" alt=""></div>

    <div class="frame"><img src="https://via.placeholder.com/500x100" alt=""></div>

  </div>

  

</div>

Please see the comments in the code.

html:

<head>

  <meta name="viewport" content="width=device-width" height="device-height" user-scalable="yes" initial-scale="1.0"> <!-- added -->

</head>



<div class="gallery">

    <div class="row rowone">

        <div class="frame">

            <img src="https://photogrist.com/wp-content/uploads/2016/07/Brent-Purcell7.jpg" class="gallery-img">

        </div>

        <div class="frame">

            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfBXwb6JoZeIoxlO7XOsYMj19qQMdiDV5HNQPRVlhyzEeocqVtAPYKtXkBrW_Gc9CYJw6Fhfk9MvSJryPAT1bJcyNuFMBWS24nFBvfP729z3ET4vEC1mcLYRHDu_G6gfeOQLUww-Va_Kd/s1600/great_depth_of_field_in_landscape_photo.jpg" class="gallery-img">

        </div>

         <div class="frame">

            <img src="https://photogrist.com/wp-content/uploads/2016/07/Brent-Purcell7.jpg" class="gallery-img">

        </div>

        <div class="frame">

            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfBXwb6JoZeIoxlO7XOsYMj19qQMdiDV5HNQPRVlhyzEeocqVtAPYKtXkBrW_Gc9CYJw6Fhfk9MvSJryPAT1bJcyNuFMBWS24nFBvfP729z3ET4vEC1mcLYRHDu_G6gfeOQLUww-Va_Kd/s1600/great_depth_of_field_in_landscape_photo.jpg" class="gallery-img">

        </div>

    </div>

    <div class="row rowtwo">

        <div class="frame">

            <img src="https://image.shutterstock.com/image-photo/funny-carrot-series-450w-583823374.jpg" class="gallery-img">

        </div>

        <div class="frame">

            <img src="https://image.shutterstock.com/image-photo/unusual-carrot-form-human-hand-450w-128098322.jpg" class="gallery-img">

        </div>

        <div class="frame">

            <img src="https://image.shutterstock.com/image-photo/funny-carrot-series-450w-583823374.jpg" class="gallery-img">

        </div>

        <div class="frame">

            <img src="https://image.shutterstock.com/image-photo/unusual-carrot-form-human-hand-450w-128098322.jpg" class="gallery-img">

        </div>

    </div>

    <!-- other rows -->

</div>

css:

body {

   background-color: #dddddd;

}



.gallery {

    width: 100%;

    overflow: auto;

    height: 100%;

    display: flex;

    flex-wrap: nowrap;

}



.row {

    display: flex;

    /* flex-direction: column; -- removed */

    height: 100%;

    /* flex-wrap: nowrap; -- removed */

    align-content: stretch;

    /* align-items: stretch; -- removed */

    /* justify-content: space-around; -- removed */

    flex-wrap:wrap; /* added */

    height:auto; /* added */

}



/* added to work with narrowest image in each row */

.rowone {

  width:388px;

}



.rowtwo {

  width:340px;

}



/* end - added to work with narrowest image in row */



.frame {

    margin: 2px;

    overflow: hidden;

    align-self:stretch; /* added - "align-self" works in ie */

    flex:1 1 auto; /* added */

    display: flex;

    align-items: center;

    align-content: center;

    justify-content: center;

    box-shadow: inset 5px 5px 40px rgba(0,0,0,0.6);

    -webkit-transition: box-shadow;

    transition: all 0.5s ease;

 }



.frame:hover {

    box-shadow: inset 3px 3px 10px rgba(0,0,0,0.6);

}



.gallery-img {

    -webkit-transition: transform;

    transition: all 0.5s ease;

    transform: scale(1);

    position: relative;

    z-index: -1;

    height:100%; /* added */

}



.frame:hover .gallery-img {

    transform: scale(1.1);  

}

link: column grid full height - https://codepen.io/carolmckayau/pen/NEqzpO