How to correctly align motley images into a grid?

Question

css

I'm building a website using this template template . The template is paid, so I'm just spying on how the layout goes there. And the template is adaptive, and I also try to layout adaptively ... but it doesn't always work out.
Here's what I've got so far:

As you can see from the screen, the pictures are motley. Those. Some are square, some are vertical and some are horizontal.
What options do I see:
1. Push a div into the background
2. Somehow trick the markup so that the images have a width of 30%, wrap around to the right of each other, and at the same time inside the cell they are centered in height and centered in width . They also had a max-width and a certain max-height (although I don't understand what to specify in it).
Html at the moment:

<div class="vmproduct_gallery productdetails">
  <div class=" width33 floatleft">
    <div class="spacer">
      <a href="/magazin/vspomogatelnoe-oborudovanie/vspomogatelnoe-oborudovanie-i-materialy/silikonovaya-trubka-3-mm-detail.html" title="Силиконовая трубка 3 мм" class="gallery_a">
        <img src="/images/stories/virtuemart/product/resized/119_220x220.png" alt="119" class="gallery_img" />
      </a>					 
    </div>
  </div>
  <div class=" width33 floatleft">
    <div class="spacer">
      <a href="/magazin/vspomogatelnoe-oborudovanie/vspomogatelnoe-oborudovanie-i-materialy/perekhodnik-1-4-kh-1-4-detail.html" title="Переходник 1/4''х 1/4''" class="gallery_a">
        <img src="/images/stories/virtuemart/product/resized/116_220x220.png" alt="116" class="gallery_img" />
      </a>  
    </div>
  </div>
  <!--...-->
</div>

css:

.floatleft {
  float: left;
}
.width33 {
  width: 33%;
}
.gallery_img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 119px;
  margin: 0;
  padding: 0;
  border: none;
  line-height: normal;
  vertical-align: middle;
}

Answer 1

I support the answer with masonry. BUT if you try to get by with one css, then I would set the height of your block, and the corresponding Line-height size. Well, and text-align: center; This will align your image horizontally and vertically.

Answer 2

jQuery Masonry can solve your problem

Answer 3

make the height of all images 100% of the block.
align images in width.
well, I would also add a wide translucent border, so that there is at least some uniformity.