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

#jquery #вёрстка #javascript

Имеется 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;
}
    

Ответы

Ответ 1

@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();