I have successfully implemented a basic image gallery using flexbox in HTML/CSS. The current setup includes six images on the page, and thanks to flex-wrap, their configuration changes from 1x6 to 2x3 to 3x2 to 4+2 to 5+1 to 6x1 depending on the window size. Now, I am looking to add two additional features:
- I want to limit the scaling to a maximum of 3x2 to maintain the symmetry of the website. Beyond this, only the size of the images should increase.
- The image sizes should adjust according to the window size. For instance, when resizing the window within a 2x3 layout, the image sizes should increase until reaching the 3x2 configuration. This adjustment is meant to ensure that the images utilize the full width of the window, with some padding preserved. I attempted using percentage width but found it incompatible with flexbox.
Below is the HTML code snippet:
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 150px;
}
.image
{
min-width: 30%;
flex-grow: 1;
transition: 0.2s;
padding: 0 2vw 4vw;
margin: 20px 10px 20px;
}
<!--Image gallery-->
<div class="container">
<a href="test_image.jpeg">
<div class="image"><img src="test_image.jpeg" href="test_image"></div>
</a>
<a href="test_image.jpeg">
<div class="image"><img src="test_image.jpeg" href="test_image"></div>
</a>
<a href="test_image.jpeg">
<div class="image"><img src="test_image.jpeg" href="test_image"></div>
</a>
<a href="test_image.jpeg">
<div class="image"><img src="test_image.jpeg" href="test_image"></div>
</a>
<a href="test_image.jpeg">
<div class="image"><img src="test_image.jpeg" href="test_image"></div>
</a>
<a href="test_image.jpeg">
<div class="image"><img src="test_image.jpeg" href="test_image"></div>
</a>
</div>