Responsive images with percentage

Question

I have a layout that has a lot of images and in order to make my layout responsive, I am using percentage values for the width and height. Each image is nested into a div tag and the images are given a width and height of 100% of their parent's width and height.

Using media queries, depending on the screen size, I am changing the width of the divs that contain each images as follows:

When only 2 images can fit on the screen: 50% width each div that contains an image

When only 3 images can fit on the screen: 33.33% width each div that contains an image

When only 4 images can fit on the screen: 25% width each div that contains an image

When only 5 images can fit on the screen: 20% width each div that contains an image

etc..

But those images look pixelated when they get bigger, they loose quality... How do I make them not loose quality and not look pixelated when they go from having a 20% width to having a 50% width?

Do I use the srcset technique? What responsive image technique do I use to allow my images to scale to any size without getting pixelated?

Answer 1

If you want to retain the original sizes of the images and make it responsive, there is a cool way to do this!

-> You can use a flexbox. (That is the secret)

Run the following code below and open the code in full screen. Then change your screen width by minimizing the screen and watch how responsive the images are using flexbox.

The magic down below is caused by a CSS property known as flex-wrap: wrap; Which will wrap all the images in a responsive container!

You can make something like this:-

.image {
  height: auto;
  width: 150px;
  margin: 10px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

<div class="container">
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
</div>

If you resize the image they will align and be responsive!

Answer 2

If I understand correctly flex-grow will do the job for you.

Whenever you have 1 image it will force it to be 100% width, 2 images 50% and so on and so forth. You don't need a media query for this, unless you want to achieve different layouts per your wish, of course.

Here is an example on codepen, you can try adding/removing images to see how it fits.

.flexbox .item { 
  flex-grow: 1; 
}

.flexbox {
  display: flex;  
  border: 2px solid #86835f;
  margin-bottom: 2em;
  max-width: 100%;
}


.item {
  box-sizing: border-box;  
  background: #86835f;  
  color: #ece69c;   
  margin: 0.25em;
}
img{
  max-width: 100%;
}

<div class="flexbox flexbox-grow-1">
  <div class="item ">
    <img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
  </div>
  <div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
  </div>    
  <div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
  </div>  
    <div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
  </div>  
      <div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
  </div>  
  
</div>