I am facing a design challenge that I believe can be solved using CSS, although it might require some Javascript.
My issue involves a gallery of images with varying sizes and proportions. I would like to achieve the following:
- Distribute the images in more rows
- Adjust their sizes and row distribution based on a maximum height and the screen size they are viewed on
- Fill an entire row with images while maintaining fixed margins between them
Below is a sketch illustrating what I am aiming for:
https://i.sstatic.net/bjZo7.jpg
As shown in the sketch, the second row has a greater height than the first in order to accommodate larger images, which is acceptable given the constraints.
Despite my efforts, I have not been able to achieve this desired layout. The closest I got was to distribute the images evenly with fixed margins but at the expense of their aspect ratios being distorted (I suspect the issue lies with min-width and max-height). Why can't I set a max-height and adjust the width accordingly?
Here is a snippet of my HTML code:
<div class="img-blocco">
<img src=“1.jpg” /> <img src=“2.jpg” /> … <img src=“n.jpg” />
</div>
And here is how I styled it using CSS:
.img-blocco {
height: 100%;
width: 90%;
padding: 0 5%;
overflow: hidden;
position: relative;
display:flex;
flex-wrap: wrap;
}
.img-blocco img {
margin: 0 5px 10px;
min-width:200px;
max-height:300px;
flex-grow:1;
}
While I successfully distributed the images evenly with proper spacing using justify-content: space-between, I am not satisfied with this solution.
Do you have any suggestions or ideas on how I can achieve the desired layout?