Как я могу центрировать изображения в слайд-шоу?

Question

Я сделал слайд-шоу после этого урока .Однако я использую изображения различной ширины, поэтому хочу, чтобы они были отцентрированы.

Моя лучшая догадка менялась

$(indexImage).css({'display':'block', 'opacity':1});

на

$(indexImage).css({'display':'block','margin':'auto', 'opacity':1});

Через пару часовперепробовав многие вещи, я решил зайти на форумы.

Но мне не повезло. Вот мой jsfiddle , кто-нибудь может мне помочь?

Спасибо

Answer 1

Для этого есть плагин jQuery:

http://boxlight.github.com/bl-jquery-image-center/

Answer 2

Вместо того, чтобы использовать большие изображения, вы можете вместо этого использовать div, размер которых соответствует полной высоте и ширине, а затем установить изображение как background-image каждого div. Затем вы можете установить background-position: 50% 50%, который будет идеально центрировать изображения.

Если хотите, вы можете использовать не совсем кросс-браузерный стиль css background-size: contain, чтобы убедиться, что изображение полностью помещается в предоставленное пространство.