How to fit and center an unknown sized image in a div element with a relative size using only pure CSS

How to fit and center an unknown sized image in a div element with a
relative size using only pure CSS

I am working on a CSS animated HTML block. I created a fully responsible
grid, so these blocks have relative sizes. The block contains a big image
to ensure to display the content on all screens correctly. The images in
the blocks have 100% width to fit the content, and they also have CSS
transitions and transforms.
I would like to center these images vertically, but using only pure CSS. I
tried a lot of variations of display, position and vertical-align
properties, but no one worked for me. I could easily achieve the proper
animation with the background property, but I don't want to create a lot
of css classes for all the images (not even with js or jquery).
So could you tell me how to solve this issue with pure CSS? I also created
a jsfiddle to demonstrate the problem.