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

one way you can solve it is by adding line-height: 0 to the a and setting the height value with px value.

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
section a {
  flex: auto;
  line-height: 0;
}
section img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}