responsive design : fancybox thumbnail gallery , resize and place images in the center of the wrapper both vertically and horizontally

I know such questions are galore in SO but I do not find a single solution to meet my need fully.

I am using fancybox jQuery plugin to create a thumbnail gallery ( non-responsive version : here- gallery is on the right side ) of images and slideshow as well.

The issue is with the thumbnail gallery - images of varying aspect ratios are uploaded and shown in the thumbnail gallery. The wrapper element (.project_gallery a - inline anchor has been made to display as block) for each image has the dimension 195x195px;

I want the images to stretch to the full of the div and be centered both vertically and horizontally.

In case you need any explanation of the last sentence above , I provide it below:

If the uploaded image has its width smaller then the height, the width should be set to fill the wrapper element fully in the horizontal direction. Even when the image width is resized to be equal to that of the wrapper, image height may not still fill the full height of the wrapper. So the image width still needs to be enlarged maintaining the aspect ratio. At a certain enlargement point, the image height fits the full wrapper height but the image width is then larger than the wrapper width. So the image needs to be placed in center of the wrapper in the horizontal direction. And the left and right side of the image may get cropped i.e: made invisible. The reverse thing should take place if we interchange the height and width of the image in the just-mentioned explanation.

And all those stuff I need to to do in a responsive design way.

EDIT: HTML mark-up for the image gallery is below.The a element will be many as this is the wrapper of the image and .many images will be there.

<div class="project_gallery">

 <a class="fancybox" href="some_href_here" data-fancybox-group="gallery" title="Project"><img src="assets/img/projects/img_name "   class="inline_block"  alt="image project"/></a>
 ...
</div>

EDIT2 : The responsive version being devloped is here now.

EDIT 3 : In case you do not like to look into any specific site, you can just consider the full question as below :

Responsive design thumbnail gallery : how to resize and place images with randomly varying aspect ratios in the center of the same sized wrapper divs (img_wrapper) both vertically and horizontally leaving no part of the wrapper unused ? The HTML markup and a bit CSS is below:

HTML:

    <div id="gallery">

    <div class="img_wrapper"><img src="..." alt="img"/></div> 

    //the above line will repeat as many images as are there.

    </div><!-- end of id gallery-->

CSS:

<style>
#gallery{
width:70%
}

.img_wrapper{

width:25%;
float:left;
}
</style>