Help with wiki styled gallery?

[LittleGr33nIMP]

EDIT: Accidentally attached two copies of the same files my bad.
How TF do you make a wikipedia styled gallery? :TnT:

Hey guys I'm currently working on updating this gallery section that I'm working on.
I tested different sized images and I sadly found out that vertical images changed the height of the gallery figure elements. I wanted containers that hold vertical images to maintain the same size as all the other gallery figures.

TLDR: I basically just want the figure elements in the gallery section to be roughly around 150px wide and tall, while keeping the images actual aspect ratio.

I'm asking here since I tried what I know and attempted looking stuff up and I'm kinda stumped. I've attached both the html and css if you want a more thorough look.


Here's an example of what I'm trying to go for with my gallery figures:
https://zeldawiki.wiki/wiki/Groose#Gallery
Here's 2 screenshots showing the issue.

Desktop:


Mobile:

[Melooon]

Soooo if I understand - you are asking how you can make images of any aspect (tall wide etc) fit into a standard box size without warping? That's an easy one Just wrap the image in a box and then set a fixed size on the box but a flexable size on the image!

CSS:

Code

.image_box {
  width: 150px;
  height: 150px;
}

.image_box img {
  max-height: 100%;
  max-width:100%;
}

HTML:

Code

<div class="image_box">
  <img src="https://melonking.net/images/window-3.gif" />
</div>

Here I have put a very tall image in a div called image_box - the box is limited to 150px - if the image is to tall it will be squished down, or if its too wide it will be squished sideways, but it will always keep its aspect!

[LittleGr33nIMP]

Woo it took a bit but I kinda got something working! 
Until opera's android browser updates their compatibility with flex basis sadly this page might look a little scuffed lol.  (on the opera android browser)
Here's what it looks like now!

PC:


Mobile:

Thanks for the help Melon!