Displaying an image gallery of different sized images and ratio with the following specs:
- No blanks (margins) between images.
- Respecting the original ratio as much as possible.
- Images surrounded by a link.
- Non-JS solution.
- Images could be cropped a bit.
- Portable solution.
- Set of images displayed is random.
- Images must be displayed from left to right (prevents using columns).
I achieved that with the following flexbox solution:
section {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
section a {
flex: auto;
}
section img {
height: 100%;
width: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Controlling flex growability</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
</style>
</head>
<body>
<section>
<a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
</body>
</html>
See Question&Answers more detail:os