Get all 'li' images inside Flexbox 'ul' container to same, fixed size

I have an image in each li label with some text below each image. The parent ul and child li have flexbox properties as below.

Parent Ul:

{ display: flex; flex-wrap: row wrap; height: auto;}

Child Li:

ul.uploaded-pics li { flex: 0 1 auto; margin: 4px; align-self: center; vertical-align: middle; border-radius: 2px; }
ul.uploaded-pics label img { align-self: center; width: 100%; transition-duration: 0.2s; transform-origin: 50% 50%;}

I have used align-self: center; to get the images to align to the centre of the parent ul. However, the image sizes are not consistent and change according to the amount of text in each respective label. Where the label text flows into a 2nd ord 3rd line, the image above stretches to fill the blank space above. align-self: flex-start; and align-self: flex-end; also don't help and the image size differs in each li.

How do I get to fix the image sizes across li irrespective of the text in the label below, such that the images align with each other and the text labels also align themselves?

Find below working code:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
ul.uploaded-pics { margin: 0; padding: 1px; border: 1px solid #aaa; border-radius: 4px}
ul.uploaded-pics { list-style-type: none;}
ul.uploaded-pics img { border: 2px;}
ul.uploaded-pics input[type="checkbox"]{ display: none;}
ul.uploaded-pics label { padding: 4px; display: block; position: relative; cursor: pointer; text-align: center; color: blue;}
ul.uploaded-pics label img { align-self: center; width: 100%; transition-duration: 0.2s; transform-origin: 50% 50%;}
ul.uploaded-pics { display: flex; flex-wrap: row wrap; height: auto;}
ul.uploaded-pics li { flex: 0 1 auto; margin: 4px; align-self: center; vertical-align: middle; border-radius: 2px; }
.pull-right .btn { margin-left: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id=Destination>Select the brands:
    <ul class="uploaded-pics">
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand1" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />Brand1</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand2" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SybU8AAv8dm.jpg" />Brand2</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand3" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />XXXX XXXX XXXX XXXX XXXX Brand3</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand4" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SybU8AAv8dm.jpg" />XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX Brand4</label>
        </li>
        <li id=SubBrands>
            <input class="SubBrandCheckBox" name="Brand5" type="checkbox"/>
            <label><img src="https://pbs.twimg.com/media/DPt4SyVUEAIX4GZ.jpg" />Brand5</label>
        </li>
    </ul>
</div>

Solution

You need to add align-self and flex-basis to the ul.uploaded-pics li as follows:

ul.uploaded-pics li {
  align-self: flex-start;
  flex-basis: 100%;
}

then each of columns is the same size and images fit into it. You can remove both the flex property from li and the flex-grow property from ul because they are unnecessary.