0

Привет всем.

Есть вопрос по поводу сдвига картинок. Есть блок, в нем img абсолютно спозиционирована по центру. Так вот, если картинка больше блока, то ее надо сдвинуть влево на ширину половины блока, таких блоков пусть будет 9, и у каждого картинка разной ширины. Я что-то нашел, но влево сдвигается только на определенную ширину. Как сделать, я так понял: от первого отсчитывается и присваивается всем img left:-83px; ширина and height #good 210x220 overfllow hidden, высота img 100

$( "#good img" ).each( function(){

    $( this ).css(
        "left", (($('#goods').width()-g)/2)
        );
});
var g = $( "#good img" ).each(function(){
    $(this).width();
});
4
  • Какая-то печальная и запутанная история. У вас на странице, блок с id = goods в единственном экземпляре, поэтому "таких блоков пусть будет 9" - не катит. Если вам надо подгонять каждую картинку в своём собственном блоке, то перебирать проще не изображения, а родительские блоки, высчитывая их параметры и адаптируя дочернее изображение.
    – Deonis
    29 авг 2014 в 23:44
  • Спасибо большое, это то, что нужно var goods = $('.goods'), blockW = goods.width(); goods.each(function(i, el){ var cImg = $('img',el), imgW = cImg.width(); if(imgW != blockW){ cImg.css('left', -(imgW - blockW) / 2); } }); Нужно было, чтобы фотки, вставленные в блок, не искажались а обрезалсь либо по краям, либо по верху и по низу. Пойду посмотрю each поподробней.
    – zif001
    30 авг 2014 в 18:03
  • Т.е. вот эта строчка значит, что мы берем у блока .goods доп. класс b_^ el = b1 , b2 ,b3 ...? var cImg = $('img',el),
    – zif001
    30 авг 2014 в 19:43
  • @zif001, нет, никаких доп. классов мы ни у кого не берем. Эти классы я создал для примера, чтоб сделать блоки разных размеров. В цикле (each) мы перебираем каждый из блоков, находим в текущем его дочернее изображение - $('img', el) - и устанавливаем соответствующее позиционирование.
    – Deonis
    30 авг 2014 в 19:50

1 ответ 1

1

Исходя из предложенных вами данных, такой вариант должен работать:

var g;
var goodWidth = $('#goods').width();
$("#good img").each( function(){
     g = (goodWidth - $(this).width())/2;
     $(this).css("left", g);
});

Ваш ответ

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

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