Align pictures evenly in a div box

Question

I want to align all the pictures in the box evenly. I want the pictures to have a evenly margin to the border of the box and to each other. The pictures should remain their ratio, no matter the screen size. But they should shrink and expand in general with smaller and bigger screens and try to fill out the box.

What is the best way to accomplish this?

.h {
  height: 100%;
  width: 100%;
}
.chars {
  display: flex;
  width: 50%;
  height: 40%;
  background-color: goldenrod;
  position: absolute;
  top: 10%;
  left: 25%;
}

<div class="chars">

  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Warrior.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />
  <img class="h" src="images/Mage.png" />

</div>

Answer 1

Use justify-content: space-around to distribute them evenly and calc(10% - 6px) + padding: 0 3px to make them responsive and keep equal space between themselves and their parent's edge

.h {
  align-self: center;
  width: calc(10% - 6px);
}
.chars {
  display: flex;
  justify-content: space-around;
  width: 50%;
  height: 40%;
  background-color: goldenrod;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 0 3px;
}

<div class="chars">

  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50/f00" />

  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />

</div>

With the given setup, using div and background-image is another option, that might be better if you don't know the amount of images and their ratio

.h {
  margin: 0 3px;
  flex: 1;
  background-size: contain;
  background-position: center;
  background-repeat:  no-repeat;
}
.chars {
  display: flex;
  justify-content: space-around;
  width: 50%;
  height: 20%;
  background-color: goldenrod;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 0 3px;
}
.chars + .chars {
  top: 40%;
}

<div class="chars">

  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/100x50/f00)"></div>

  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>

</div>

<div class="chars">

  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50x100/f00)"></div>

  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>
  <div class="h" 
       style="background-image: url(http://placehold.it/50)"></div>

</div>

---

Updated with this extra sample based on a comment, where the images should be in 2 lines

.h {
  align-self: center;
  width: calc(20% - 6px);
  margin: 3px 0;
}
.chars {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 50%;
  background-color: goldenrod;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 3px;
}

<div class="chars">

  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50/f00" />

  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />
  <img class="h" src="http://placehold.it/50" />

</div>

Answer 2

I would suggest leveraging background-image instead of inserting images, as you can use background-size to help with maintaining scaling ratios.

JSFIDDLE

CSS

.chars {
    width: 50%;
    height: 40%;
    background-color: goldenrod;
    position: absolute;
    top: 10%;
    left: 25%;
    display:table;
    border-collapse:separate;
    border-spacing:3px; // use this to space out items
}
.char{
    width:1%; // this is to create a 'justified' alignment of the 'cell's
    display:table-cell;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
}

HTML

<div class="chars">
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
    <div class="char" style="background-image:url('http://lorempixel.com/400/800/');"></div>
</div>