Odtnhj

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/AVvXsEgJcfHUt5Cfl1pubwk0uoM4IR6mLkzkfUUsq3GhyV8kXPh7dLT2VNTz_mOa9J6mMyV1sD6N76qVdDf7ZZhMcad4UKD0TKgoPxmtGwljJOTEIXj-0lWsawcwU7kHhp1lORBooS8mR78xVz1u/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/AVvXsEgJcfHUt5Cfl1pubwk0uoM4IR6mLkzkfUUsq3GhyV8kXPh7dLT2VNTz_mOa9J6mMyV1sD6N76qVdDf7ZZhMcad4UKD0TKgoPxmtGwljJOTEIXj-0lWsawcwU7kHhp1lORBooS8mR78xVz1u/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