Flexbox responsive height of elements

Question

I try to put four pictures of different sizes in one row. Kinda like this.

Anyway, I got so far to put everything in a row with the same height, even though some pics might stretch a bit too much, but thats ok.

But now I also want it to be responsive so if I lower the size of my browser, the pics should get smaller, but they just don't.

Please help, that's what I wrote so far.

.frontpageinspire {
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
}

.top8 {
  height: 300px;
  padding: 10px 5px 10px 5px;
  flex-grow: 1;
  flex-shrink: 1;
  align-self: center;
}

<div class="frontpageinspire">
  <img class="top8" id="image1" src="img/abc/abc1.jpg"></img>
  <img class="top8" id="image2" src="img/abc/abc2.jpg"></img>
  <img class="top8" id="image3" src="img/abc/abc3.jpg"></img>
  <img class="top8" id="image4" src="img/abc/abc4.jpg"></img>
</div>

Add `min-width: 0` to `.top8` class. http://stackoverflow.com/a/36247448/3597276 — Michael Benjamin, Jul 28 '16 at 21:33
They do get smaller, at their width, so how do you mean when you say _get smaller_? — Asons, Jul 28 '16 at 22:01

score 0 · Answer 1 · edited Jul 28 '16 at 22:46

0

try this!

img {
    width: 100%;
    height: auto;
}

edited Jul 28 '16 at 22:46

Cookie Ninja

1,156
15
29

answered Jul 28 '16 at 21:29

Sanket Patel

308
3
19

Flexbox responsive height of elements

1 Answers1