Best way to resize images, % vs. max-width

Question

I am trying to create a layout where the images can grow and shrink depending on the viewport width. When only 2 images can fit in the viewport, I gave them a width of 50% each. When only 3 images can fit in the viewport, I gave them a width of 33.33% each. When only 4 images can fit in the viewport, I gave them a width of 25% each. I basically divide the number of images by 100. But at some point when I'll have for example 6 images in a row, they are each going to take 16.66%, etc.

I am currently using flexbox and used flex-wrap set to wrap so they can wrap onto a new line if the viewport gets smaller. I am also using media-queries to change the width of the images depending on the viewport size.

But I don't really like this approach I am using, because if all the images don't have a whole number as width and have a decimal number as a width there will be some extra space that will make my layout look not uniform.

Can I use max-width instead of percentage to achieve the same layout?

When only 2 images can fit on the screen, I give it a max-width of 300px for example. And when 3 images can fit on the screen, I give it a max-width of 200px for example. This way, the images will scale up until they reach their max-width and then the media queries will kick in and the max-width will change.

What is the best approach for this layout I am trying to have?

I want to make the images responsive, but realized that giving them a percentage just makes the images look pixelated when they grow...

1- Do I use percentage or max-width on the images so they can change size depending on the viewport.

2- Which responsive images technique do I use? So the images don't look pixelated when their width grows...

Answer 1

Since you want to serve the same image in different devices/viewport width, it would be a good tactic to use a set of images as described in this MDN guide.

For sure your mobile layout does not include showing a set of 12 images or more (width ~17%). But the opposite, 12 or more images on desktop, and 1 (mobile phones) or 4 (in case of tablet devices).

I don't think you need max-width, a proper width in % for the image container and:

img {
    width: 100%;
    height: auto;
}

is enough. For example:

.container {
  width: 100%;
  display: flex;
  align-items: stretch;
  align-content: space-evenly;
  justify-content: space-evenly;
  flex-flow: row;
}

.container div {
  width: 50%;
}

.responsive img {
  width: 100%;
  object-fit: contain;
  height: auto;
}

<div class="container">
  <div>
    <picture class="responsive">
      <source media="(max-width:1024px)" srcset="https://picsum.photos/id/238/1024/600">
      <source media="(max-width:650px)" srcset="https://picsum.photos/seed/picsum/650/300">
      <source media="(max-width:465px)" srcset="https://picsum.photos/seed/picsum/465/300">
      <img src="https://picsum.photos/id/247/1200/800" alt="A good friend">
    </picture>
  </div>
  <div>
    <picture class="responsive">
      <source media="(max-width:1024px)" srcset="https://picsum.photos/id/239/1024/600">
      <source media="(max-width:650px)" srcset="https://picsum.photos/seed/picsum/650/300">
      <source media="(max-width:465px)" srcset="https://picsum.photos/seed/picsum/465/300">
      <img src="https://picsum.photos/id/237/1200/800" alt="A good friend">
    </picture>
  </div>
</div>

PS: Try to change viewport width when viewing the code snippet.