Introductory. There is a fixed size block. In the block you need to have a different number of images of the same size. If there are few images, and they are placed in a block, they should follow each other (as in a regular inline-block).

But if there are more of them, then they should evenly bump against each other, as if compacting (stacking up like cards), and keeping their original size.

Is it possible to implement this using only css?

When everyone fits Example when inline-block.

When places are few An example of when space is scarce and need to be imposed.

  • Show me an example of how this should look like - Cheg
  • @Cheg, corrected. - Mr. Fix
  • The screenshots are not really what you can see. Should images not end up being compressed? - Cheg
  • @Cheg, yes, that's right. That's the thing. Should not shrink. - Mr Fix

1 answer 1

If I correctly understood the question, then, for example:

.gallery { display: flex; } .gallery > *:not(:last-child) { overflow: hidden; } .gallery img { width: 100px; } 
 <div class="gallery"> <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div> <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div> <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div> <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div> <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div> <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div> <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div> <div><img src="https://i.pinimg.com/736x/a3/4a/42/a34a424444743d1f982dd4557654c2b5--the-mountains-are-calling-idaho.jpg"></div> </div>

  • Great. An interesting move :-) Thank you. - Mr Fix
  • The method is not bad, but it completely overwrites the adjacent pictures. This is noticeable if they have alpha channel. - Mr. Fix
  • one
    then inside the container it is necessary to position it absolutely in the center and not to hide it. and the last to give a fixed width - Artem Gorlachev