3

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

Вариант с изменением размеров изображения не подходит, т.к. по высоте div фиксирован и изображение должно занимать его полностью.

HTML:

<div class="box">
    <img src="http://hashcode.ru/upfiles/logo.png">
</div>
<div class="box">
    <img src="http://hashcode.ru/upfiles/logo.png">
</div>
<div class="box">
    <img src="http://hashcode.ru/upfiles/logo.png">
</div>
<div class="box">
    <img src="http://hashcode.ru/upfiles/logo.png">
</div>

CSS:

.box {
    width: 21%; 
    height: 70px; 
    background: #222;
    float: left;
    text-align: center;
    margin: 20px 2%;
    overflow: hidden;
}
2
  • @x01x, а не лучше ли просто масштабировать изображение, чем резать?
    – Deonis
    14 июн 2014 в 22:27
  • т.к. меняется только ширина блока при масштабировании будут отступы с верху и/или с низу. что не совсем подходит. интересует вариант именно обрезания по бокам.
    – x01x
    15 июн 2014 в 8:00

1 ответ 1

4

@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();
3
  • спасибо за вариант решения. если не найду решения через js, то воспользуюсь.
    – x01x
    15 июн 2014 в 8:25
  • 1
    @x01x, странно... Обычно, сначала ищут решения без JS, но если вам желателен именно такой вариант, то можно соорудить. Дополнил в ответе.
    – Deonis
    15 июн 2014 в 8:46
  • спасибо. то что нужно!
    – x01x
    15 июн 2014 в 19:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.