Центрирование изображения в блоке меньшего размера.

Имеется div заданной высоты, ширина у div в процентах. В div вставлено изображение. При разрешении экрана более 1024 изображение центрируется. При разрешении равном или менее 1024 оно обрезается с одного края, т.к. ширина блока становится меньше ширины изображения. Как можно в таком случае горизонтально центрировать изображение средствами js и обрезать его с обоих боков? Вариант с изменением размеров изображения не подходит, т.к. по высоте div фиксирован и изображение должно занимать его полностью. HTML:

CSS: .box { width: 21%; height: 70px; background: #222; float: left; text-align: center; margin: 20px 2%; overflow: hidden; }

Ответ

@x01x, на моё предложение в комментарии, вы не отреагировали. Значит, могу предложить такой вариант решения вашей задачи. Только учтите, что решение не очень кроссбраузерное .box { position: relative; display: inline-block; width: 21%; height: 70px; margin: 5px; text-align: center; border: 1px solid #999; overflow: hidden; } .box img{ position: absolute; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } UPD Вариант с JS var box = $('.box'), img = $('img', box), imgW = img.width(); $(window).resize(function(){ img.css({ marginLeft: (box.width() - imgW) / 2 }); }).resize();