How to center images in a responsive grid with CSS only and supporting retina displays?

Question

I have a page where I need to display a photo gallery in a responsive website, with support for retina displays too. The grid must be composed by blocks that fill a given container proportionally in this way:

• If the screen width is >= 1200px the grid must be composed by 4 columns (25% width for each block)
• If the screen width is < 1200px and >= 768px the grid must be composed by 3 columns (33% width for each block)
• If the screen width is <= 767px the grid must be composed by 2 columns (50% width for each block)

All the grid blocks must be in 2:3 ratio sizes, and measuring a grid block with a 1980px wide viewport I can tell you is around 500px (this is not a limit, it's just a measure data useful I think for what I need explained below).
This can be easely achieved via @media queries of course, and using padding-top: 66.66666666666667% for the 2:3 ratio; I'm trying to give you as much data as I can to explain the limits I must respect.

So here comes the tricky part:
the thumbnails for the grid are of various sizes and aspect ratios, and I need to center them in their respective grid blocks, vertically and horizzontally, while fitting/covering the whole grid block area.
Since the grid is responsive, I need the thumbs to scale proportionally along with their block for narrow viewports.
To complicate things even more I need to support retina displays, so the thumbs must be double in size and downscaled by half, and fit in their grid blocks too.

How can this be achieved? (preferably only via CSS)

---

Additional data:
I'm using joomla! 2.5 as CMS for this project, and I need to give my client a very simple way to add images. The best and easiest solution I found is Simple Image Gallery: the only need I have for this plugin is the auto thumbs generating procedure + auto generated <ul> grid in the page, and is very simple to override the HTML+css output structure for my needs.

As for retina displays, it should be better to provide a correct @2x syntax, but I don't really care; as for performance concerns, I think that giving for all display a single downscaled image is more easy to handle, of course, but also a really effective and efficient way to handle the img weight!
See this for reference, basically you use images with dimensions doubled and a jpg compression of 20 or so, downscale the image by half with CSS, and you still have a nice looking image, good for both normal and retina displays. Also with a reduced weight from the original size image by up to 25%!
I've tested this myself and I can tell that this is working quite well, in very few cases I had more weight than a normal sized image, and by negligible amounts (compared to the ease and benefits).

Answer 1

Use a combination of techniques to do this:

• Fit and Shrink technique
• Centering an image in a box
• Inline-block thumbs

Answer 2

Long question, but if its only about the centering of the images of different sizes you could do it like this:

You need Divs which you will float, those will have the same heights and wdths (you can adjust that however for the different queries).

After that you have another div in each of those divs for vertical and horizontal center:

  <div class="outer">
    <div class="table">
    <div class="image"></div>
     </div>
    </div>

Basically, you float the outer div, apply display table-cell to the .table div, then apply vertical align middle, for vertical centering.

IMPORTANT

A floated div with display:table cell will ignore vertical align! Therfore the additional div!

http://jsbin.com/ajunol/2/edit

.outer {
  height:100px;
    width:100px;
  border:solid;
  float:left;
  margin:10px;
}
.table {
  height:100px;
  width:100px;
  border:solid;
    display:table-cell;
  vertical-align:middle;
}
.image {
  height:50px;
  width:50px;
  background-color:red;
  margin:0 auto;
  max-width:100%;
}

Height, width and background color, obv you can disregard, but you should have max-width 100% so the image doesnt exceed the containing box.

In my example the images are represented as divs, but obviously you will have image tags there and not divs. To work with this, replace the divs with class image with images.