Restricting image inside div and arrange those div inside a div

Question

I am using Gridster for webpage.The widgets have images on it.These images can be added and deleted with + and X button.

On clicking +, a modal opens and displays images which I retrieve from server dynamically

The modal is the <div1 class="modal-body">.In that I want <div2 class="outerdiv">.

In a single row in div1 there should be an equal number of div2 is what I want.Entire div1 should have div2 which are separated properly from each other and same in number on each row.

Then comes <div3 class="innerdiv"> which will be inside each div2.Thediv3` will contain my image which should fit properly within that div only.

Overall, when I open my modal the images should symmetrically and properly placed from each other

The CSS which I tried

.modal-body {
  width: 100%;

  position: relative;
  text-align:center;
}

.outerdiv {
  height: 90px;
  width: 90px;
  display:inline-block;
  margin: 10px;
}


.innerdiv{
max-height:95%;
max-width:95%;


}

My actual code for server

<div class="modal-body">

            {% for file in brands %}
            {% load static %}
            <div class="outerdiv"><div class="innerdiv"><img src="{% get_static_prefix %}images/brands/{{file}}"></div></div>
            {% endfor %}      

    </div>

My representational image:

<div class="outerdiv"><div class="innerdiv"><img src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png"></div></div>

I dont know if what I did is right or not because when I when I do inspect element in browser I see that image is coming out of the div also sometimes the images almost overlap each other

Jquery function which applies preset class to clicked image.I want it to be applied to innverdiv

var parentLI;
$(document).on("click", ".addmorebrands", function() {
                parentLI = $(this).closest('li');
        $('#exampleModalCenter').modal('show');
            $('#exampleModalCenter img').click(function(){
        $(this).addClass('preselect');
        $(this).siblings().removeClass('preselect');
        selectedImageSRC = $(this).attr('src');
      })
    });

Fiddle

Answer 1

Move the preselect class to the innerdiv.

Make some of these css modifications:

img {
  width: 100%;
  height: 100%;
}

.preselect{
  background: lightgreen;
  border: 1px solid black;
}

checkout fiddle