title: responsive design : fancybox thumbnail gallery , resize and place images in the center of the wrapper both vertically and horizontally
body: <p><em>I know such questions are galore in SO but I do not find a single solution to meet my need fully.</em></p>
  
  <p>I am using <a href="http://fancyapps.com/fancybox/" rel="nofollow">fancybox jQuery plugin</a> to create a thumbnail gallery ( non-responsive version : <a href="http://demo.lumierebd.com/" rel="nofollow">here</a>- gallery is on the right side ) of images and slideshow as well. </p>
  
  <p>The issue is with the thumbnail gallery - images of varying aspect ratios are uploaded and shown in the thumbnail gallery. The wrapper element (<code>.project_gallery a</code> - inline anchor has been made to display as <code>block</code>) for each image has the dimension 195x195px; </p>
  
  <p>I want the images to stretch to the  full of the <code>div</code> and be centered both vertically and horizontally.</p>
  
  <p><strong><em>In case you need any explanation of the last sentence above</em></strong>, I provide it below:</p>
  
  <p>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 <strong>maintaining the aspect ratio</strong>.  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.</p>
  
  <p>And all those stuff I need to to do in a responsive design way.</p>
  
  <p><strong>EDIT</strong>:
  HTML mark-up for the image gallery is below.The <code>a</code> element will be many as this is the wrapper of the image and .many images will be there.</p>
  
  <pre><code>&lt;div class="project_gallery"&gt;
  
   &lt;a class="fancybox" href="some_href_here" data-fancybox-group="gallery" title="Project"&gt;&lt;img src="assets/img/projects/img_name "   class="inline_block"  alt="image project"/&gt;&lt;/a&gt;
   ...
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT2</strong> : The responsive version being devloped is <a href="http://demo2.lumierebd.com/" rel="nofollow">here</a>  now.</p>
  
  <p><strong>EDIT 3 :</strong>  <em>In case you do not like to look into any specific site, you can <strong>just consider the full question as below</strong> :</em></p>
  
  <p>Responsive design thumbnail gallery :   how to  resize and place images with randomly varying aspect ratios in the center of the same sized wrapper <code>div</code>s (<code>img_wrapper</code>) both vertically and horizontally   leaving no part of the wrapper  unused ? The HTML markup and a bit <code>CSS</code> is below:</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="gallery"&gt;
  
      &lt;div class="img_wrapper"&gt;&lt;img src="..." alt="img"/&gt;&lt;/div&gt; 
  
      //the above line will repeat as many images as are there.
  
      &lt;/div&gt;&lt;!-- end of id gallery--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>&lt;style&gt;
  #gallery{
  width:70%
  }
  
  .img_wrapper{
  
  width:25%;
  float:left;
  }
  &lt;/style&gt;
  </code></pre>