title: Best way to resize images, % vs. max-width
body: <p>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.</p>
  <p>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.</p>
  <p>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.</p>
  <p>Can I use max-width instead of percentage to achieve the same layout?</p>
  <p>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.</p>
  <p>What is the best approach for this layout I am trying to have?</p>
  <p>I want to make the images responsive, but realized that giving them a percentage just makes the images look pixelated when they grow...</p>
  <p><strong>1- Do I use percentage or max-width on the images so they can change size depending on the viewport.</strong></p>
  <p><strong>2-  Which responsive images technique do I use? So the images don't look pixelated when their width grows...</strong></p>
  <p><a href="https://i.stack.imgur.com/w6KXo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w6KXo.png" alt="images with percentage width" /></a></p>