I have noticed that there are many questions like mine on SO, but I haven't found a single solution that fully meets my needs.
Currently, I am utilizing the fancybox jQuery plugin to create a thumbnail gallery (non-responsive version: here - the gallery is located on the right side) of images and slideshows.
The problem arises with the thumbnail gallery - as images of varying aspect ratios are uploaded and displayed. The wrapper element (.project_gallery a - an inline anchor made to display as block) for each image has dimensions of 195x195px;
I want the images to stretch to fully occupy the div and be centered both vertically and horizontally.
If further explanation is needed regarding the last sentence above, I will provide it below:
If the width of the uploaded image is smaller than its height, the width should be set to fill the wrapper element entirely in the horizontal direction. Even if the image's width is resized to match that of the wrapper, the height of the image may still not fill the entire height of the wrapper. Thus, the image width should continue to be enlarged while maintaining the aspect ratio. Once the image's height fits the full wrapper height, but the image's width exceeds the wrapper width, the image needs to be centered within the wrapper horizontally. This might result in parts of the left and right sides of the image getting cropped or becoming invisible. The opposite effect should occur if we switch the height and width from the previously described scenario.
All these adjustments need to be done in a responsive design manner.
EDIT:
The HTML mark-up for the image gallery is as follows. There will be multiple a elements serving as image wrappers and many images will be present.
<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 developed can be viewed here.
EDIT 3: If you prefer not to visit any particular site, you can simply read the question in full below:
Responsive design thumbnail gallery: how can I resize and position images with randomly varying aspect ratios at the center of identically sized wrapper divs (img_wrapper) both vertically and horizontally, making sure no part of the wrapper remains unused? Below is the HTML markup and some CSS:
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>