Making array of imgs responsive

Question

I've img's laid out like:

<div><img src='.. '><img src='...'> ... </div>

I want the person's photos to be laid out in single row of site and on resizing it should become smaller and be on the horizontal frame only and not get wrap around to next row. I want to do it using only CSS.

I've read many techniques today( eg Responsive Images with CSS ) but all talk about single image only. And those techniques don't seem to work in this case.

What's the way to do it?

It depends how many images u want to have in a row(`width: 100%` for wrapper and if u have 4 images set for them `width: 25%`).. but if u want to have it dynamically w/o `js` its impossible.. — liborza, Oct 05 '16 at 16:52
@LiborZahrádka: It's perfectly possible using exclusively CSS, as illustrated in my answer. This is only the in-my-opinion best, but not by a long shot the only way this can be accomplished. — TheThirdMan, Oct 05 '16 at 17:05
@LiborZahrádka: With the exception that you have to know the amount of images beforehand to choose the right percentage value (or set it with JS after the fact), plus due to not being percentage-based, the flexbox implementation can be more easily modified, such as for adding spaces inbetween elements. I've updated my answer to illustrate that. — TheThirdMan, Oct 05 '16 at 17:12
I agree with u.. its easier to set up flex then js i totally forget for flex, and also there is a lot of bugs to use flex or i had problems with that so i rather using js or use a grid system — liborza, Oct 05 '16 at 17:14

TheThirdMan · Accepted Answer · 2016-10-05T17:10:40.150

For an unknown amount of images, you can use flexbox to automatically distribute the available space among all elements:

div {
  display: flex;
  width: 100%;
}
div > div {
  flex: 1;
}
div > div img {
  width: 100%;
}

<div>
  <div>
    <img src="https://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
  <div>
    <img src="https://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
  <div>
    <img src="https://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
</div>

This implementation also makes it easy to provide spacing inbetween images:

div {
  display: flex;
  width: 100%;
}
div > div {
  flex: 1;
}
div > div img {
  width: 100%;
}
div > div:not(:first-child) {
  margin-left:10px;
}
div > div:not(:last-child) {
  margin-right:10px;
}

<div>
  <div>
    <img src="https://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
  <div>
    <img src="https://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
  <div>
    <img src="https://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
</div>

Making array of imgs responsive

1 Answers1