Prefer shrinking over growing in a flex container with flex-flow: row wrap

Question

Displaying an image gallery of different sized images and ratio with the following specs:

1. No blanks (margins) between images.
2. Respecting the original

Answer 1

Here is an idea where you can consider height to control the size of the rows and the main trick is to rely on min-width:100% for your images in order to fill the space.

Basically, the a will define the height, the image will follow that height and will compute an auto width to keep the ratio. The width of the image will define the width of the link and then the link will grow to fill the space (creating space inside it). Finally, the min-width:100% you will make the image fill the space created inside the link.

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  height: 100px;
}

section img {
  height: 100%;
  width: auto; /* we need auto to keep the ratio based on the height */
  min-width: 100%; /* we expand the image to fill the gaps */
  max-width:100%;
  object-fit: cover;
}

If you consider vw unit for the height you will have a static grid that will scale while keeping the same overal structure:

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  height: 8vw;
}

section img {
  height: 100%;
  width: auto;
  min-width: 100%;  
  max-width:100%;
  object-fit: cover;
}