Resize and crop of image to centre.

Hi I'm working on a portfolio site with a grid of 4x4
these are set to expand with the browser window
within these divs are an image, a caption (on hover) and then its clickable through to a lightbox with the projects details
an example of one of these are as follows
HTML Code:

<div class="project" id="client_name">
<a id="portfolio-project-2" href="client_name.html">
<img src="images/portfolio/client_name.jpg" alt="client_name" />
<span class="desc">
<strong>client_name</strong>
</span>
</a>
</div>

and the appropriate CSS for each project is as follows
Code:

.project {
width:24%;
height:23%;
margin:10px;
overflow:hidden;
position:absolute;
vertical-align:middle;
text-align:center;
}
.project img {
width:auto;
height:100%;
vertical-align:middle;
text-align:center;
}
.project a {
opacity:0.8;
filter:alpha(opacity=80);
text-decoration:none;
}
.project a:hover {
opacity:1;
filter:alpha(opacity=100);
}
.project a .desc { display: none; }
.project a:hover .desc{
display: block;
font-size: 1.2em;
padding: 10px 0;
background: #000;
filter:alpha(opacity=80);
opacity:.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/
color: #efefea;
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
margin: 0;
width: 100%;
text-align:left;
}
.project a:hover .desc strong {
display: block;
font-size:0.85em;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.1em;
}

this resizes in the browser beautifully except for one small detail.
even though the image is centred and this is noticeable when the browser is resized to odd shapes, when the image starts to be cropped I cannot get it to crop to the centre, the image is always losing the right edge...
does anyone have any ideas on how to have it so when the image is smaller than the aspect ratio that it will crop the left and the right, thus leaving the image centre aligned still?