Resize N number of Images to fit next to each other

Question

I have a div with the given width and want to fit N number of images next to each other.

The issue is that I'm getting the HTML from a third party. Therefore I can only apply CSS stuff to it.

.row {
  border: 5px solid green;
  width: 500px;
}

<div class="row">
  <img src="https://picsum.photos/200/300" alt="Snow">
  <img src="https://picsum.photos/200/300" alt="Forest">
  <img src="https://picsum.photos/200/300" alt="Mountains">
</div>

How can I get that to work ?

Unfortunately, this is not possible with your current setup without being able to change the HTML. The only solution you could do is set a static `width` and `height` on your `img`. — Kameron, Apr 13 '22 at 15:38
This is the best duplicate I've found, but it doesn't bring satisfaction: [How can I fit images with varying sizes in a flex row?](https://stackoverflow.com/questions/69659229/css-flexbox-issue-with-random-image-sizes) — isherwood, Apr 13 '22 at 15:48

score 1 · Answer 1 · edited Apr 13 '22 at 15:50

It is not possible without specifying a static width of the image. While your situation involves a fixed container width and the markup is not changeable, you should either figure out a way to alter the markup or figure out what n is/could be. This works despite what value n represents.

Use width: calc(100% / 3); where 3 represents n.

.row {
  border: 5px solid green;
  width: 500px;
  display: flex;
  flex-wrap: nowrap;
}

img {
  width: calc(100% / 3);
}

<div class="row">
  <img src="https://picsum.photos/200/300" alt="Snow">
  <img src="https://picsum.photos/200/300" alt="Forest">
  <img src="https://picsum.photos/200/300" alt="Mountains">
</div>

Resize N number of Images to fit next to each other

1 Answers1