CODEWITHSUNDEEP
htmlimagecssflexbox
kirschkern
kirschkern

Reputation: 1387

Scaling images in flexbox

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.

Firefox-Screenshot of the result that I want

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

What am I missing?

Upvotes: 1

Views: 96

Answers (2)

Quentin
Quentin

Reputation: 3289

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

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371231

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

Upvotes: 2

Related Questions