CODEWITHSUNDEEP
htmlcssflexbox
neoKurt
neoKurt

Reputation: 67

Resize N number of Images to fit next to each other

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 ?

Upvotes: 1

Views: 43

Answers (1)

Kameron
Kameron

Reputation: 10846

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>

Upvotes: 1

Related Questions