отрицательными margin сдвиньте так чтобы посередине оказалось. и overflow hidden;
js:
$('.image-box').each(function () {
var $this = $(this);
var $img = $this.children('img');
// контейнер длинна\высота
var cW = $this.width(),
cH = $this.height();
// изображение длинна\высота
var iW = $img.width(),
iH = $img.height();
// отношение длинны с высотой контейнера\изображ
var cRatio = cW / cH,
iRatio = iW / iH;
if (cRatio<iRatio) { //этот блок
$img.height(cH);
var margin=-((cH/iH)*iW-cW)/2 //(новая ширина картинки минус ширина контейнера) пополам
$img.css('margin-left',margin)
} else {
var margin=-((cW/iW)*iH-cH)/2
$img.width(cW);
$img.css('margin-top',margin)
}
// аналог console.log в данной ситуации
// $this.append(cRatio + ' > ' + iRatio + ' > ' + corr);
});
css:
body { margin: 100px; }
.image-box {
font-size: 10px;
overflow: hidden;
border: 1px dashed #000;
position: relative;
}
img {
display: block;
position: absolute;
margin: auto;
opacity: .7;
}
HTML
<div class="image-box" style="width:300px;height:180px">
<img src="http://cs617526.vk.me/v617526544/137ea/sgy9upmbGEI.jpg" alt="" />
</div>
<br/>
<div class="image-box" style="width:300px;height:150px">
<img src="http://cs320626.vk.me/v320626446/142f/DF-KetJsspg.jpg" alt="" />
</div>