Scaling images in flexbox

Question

I have several images with different sizes within a row. The images should be sized automatically to fill the available space while keeping their aspect ratio.

If possible, their actual visual size should be in relation to their original size. With that I mean: A large image should be larger in the scaled version as a smaller image.

.Container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
}

img {
    max-width: 100%;
}

<div class="Container">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
</div>

A fiddle can be found here: http://jsfiddle.net/ej5au8os/

In Firefox 62 I get the result I want.

Chrome and Edge simply doesn't seem to scale the images at all.

What am I missing?

Search for css keyword browser compatibility: https://stackoverflow.com/questions/30540750/displayflex-not-working-in-chrome — Jérôme Teisseire, Sep 28 '18 at 21:44

score 2 · Answer 1 · answered Sep 28 '18 at 22:07

2

Images as flex items are notoriously quirky. Don't make them flex items. Wrap them in divs.

Here's all you need (your CSS was fine, just got rid of a few unnecessary rules):

.Container {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}

<div class="Container">
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div>
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
</div>

jsFiddle demo

answered Sep 28 '18 at 22:07

Michael Benjamin

346,931
104
581
701

thanks for your support. Using the wrapper works fine. Marked the answer from Quentin as correct, simply because he was first (same solution). – kirschkern Sep 28 '18 at 22:17
Accept whichever answer you prefer. That's totally up to you. But just note, it was not the same solution. The CSS was different. Mine worked. His didn't. After I posted my answer, he updated his CSS to match mine (check the edit history). No big deal. Just for the record. – Michael Benjamin Sep 28 '18 at 22:22
I did not edit my answer to match yours, but the OP's question. I was wrong about his expectations so I "corrected" my answer. Sorry that you take it badly. – Quentin Veron Sep 29 '18 at 10:56
I did not take it badly. Read my comment again, especially the part where I say it's "no big deal". I was responding to the OP's comment and pointing out what actually happened. The fact is that you did edit your answer to match mine. That's just a fact. Whether you did that on purpose or not is a different question. @QuentinVeron – Michael Benjamin Sep 29 '18 at 11:23

Quentin Veron · Accepted Answer · 2018-09-28T22:09:24.853

Wrap your images inside blocks.
You might want to use an autoprefixer for cross browser compatibility.

Global support: 95.71% (source)

.Container{
  width: 100%;
  display: flex;
  align-items: center;
}

img {
  max-width: 100%;
}

<div class="Container">
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
  <div class="image-wrapper">
    <img src="https://klotzen-statt-kleckern.de/tmp/logo-g.png">
  </div>
</div>

Tested with Chrome, Firefox and Edge

Wow, that was a really fast answer! Thanks Quentin. With your solution, the images all have the same height, which is not exactly what I want. But using your suggested wrapper and my original CSS looks like the solution I'm looking for. — kirschkern, Sep 28 '18 at 22:06
Oh, I thought you wanted all the images to get the same size. — Quentin Veron, Sep 28 '18 at 22:07
I edited my answer. Just remove the `flex property` and that's it! — Quentin Veron, Sep 28 '18 at 22:10

Scaling images in flexbox

2 Answers2

jsFiddle demo

Linked