3

I'm trying to justify 3 images with equal space around them. I set width of images in percents. I tried to use flexbox and justify-content: space-evenly but images don't keep aspect ratio:

Codepen

.container {
  width: 50%;
  border: 1px solid black;
  
  display: flex;
  justify-content: space-evenly;
}

.container img {
  width: 10%;
}
<div class="container">
  <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
  <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
  <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
</div>

I need to keep aspect ratio

Jithin Raj P R
  • 6,667
  • 8
  • 38
  • 69
Ildar
  • 3,808
  • 7
  • 45
  • 81
  • Do note, `space-evenly` won't work cross browsers as not all of them support it. The aspect ratio breaks because of the default `align-items: stretch`, so change it to e.g. `flex-start`. A workaround for `space-evenly` is found in the dupe link. – Asons Dec 22 '17 at 08:49

3 Answers3

1

This will solve your issue

I have just added align-items: center; to your .container and that solves it.

A working sample from your fiddle: 

.container {
  width: 50%;
  border: 1px solid black;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.container img {
  width: 10%;
}
<div class="container">
  <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
  <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
  <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
</div>

Hope this was hlpfull for you.

Jithin Raj P R
  • 6,667
  • 8
  • 38
  • 69
0

Try this justify-content: space-between; If this also not works then you might not be using chrome or latest version of chrome.

karthik shankar
  • 107
  • 2
  • 15
0

Use an empty <span> and space-between to create equal space around every <img>.

Try this:

.container {
  width: 50%;
  border: 1px solid black;
  
  display: flex;
  justify-content: space-between;
}

.container img {
  width: 10%;
}
<div class="container">
<span></span>
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
<span></span>
</div>

Or a more grace way which needn't to edit your HTML:

.container {
    width: 50%;
    border: 1px solid black;
  
    display: flex;
    justify-content: space-between;
}

.container::before, .container::after {
    content: "";
}

.container img {
    width: 10%;
}
<div class="container">
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" />
</div>
Dimpurr Cheny
  • 1
  • 3