Как сделать картинку в слайдере всегда по центру?

Question

[Игорь Пушкарский]

Добрый день!
Суть такая есть слайдер в нем картинка на ширину окна браузера 1920px.
На картинке нарисован какой то отцентрованный элемент например человек, при уменьшении окна браузера
этот человек начинает прижиматься к правому краю, естественно не хочется такого видеть, и не хочется сжимать картинку по высоте, то есть картинка должна обрезаться с обеих сторон одновременно и равномерно, как этого достичь?

Answer 1

[Юрий Лобанов]

codepen.io/iiil/pen/meAJx
Насчет поддержки только уточните.

В примере я использую ширину картинки в 800px, для наглядности, данная конструкция работает и при ширине экрана больше ширины картинки. Если в пути к файлу измените на 1920, то надо поменять и в css 800 на 1920. С поддержкой все не очень хорошо, проверьте calc и vw.
Если не утроит такая поддержка - то кроме как использования js ничего не придумаю. Если Вас конечно по какой-то причине не устраивает background.

Answer 2

[Виталий Желтяков]

C помощью JS пересчитывать положение картинки на заднем фоне при ресайзе.

background-size: cover | contain - вам не подойдёт?

Comments

[Игорь Пушкарский]

Нет не подходит, contain сжимат по высоте картинку, а cover работает нормально только при позиции fixed/.

Answer 3

[Виталий Киренков]

Cover - работает нормально, только вот позиционирование нужно ставить 50% 50%;

А если нужен элемент по центру, то

.centered { position: absolute; top: 50%; left: 50%; margin-top: -высотаЭлемента/2; margin-left: -ширинаЭлемента/2;}

Answer 4

[Игорь Пушкарский]

В общем что бы не играть в сломанный велосипед вот сайт ues.7-px.ru/.

Как поставить элемент по центру я знаю, а вот как поставить активный элемент из группы элементов выравненных по левому краю, по центу экрана чет придумать не могу.
Например есть www.bolshevik-pp.ru на нем работает все отлично, и я подозреваю, что работает из за того что там нет элементов спозиционированных по левому краю.

Comments

[Lisonok]

У вас сайт закрыт

[Юрий Лобанов]

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

[Игорь Пушкарский]

Сори открыл сайт. Если непонятно выразился, я имел ввиду слайдер котором элементы li {float:left;} если бы они просто стояли можно было бы юзать, как сказал DeLaVega. Но тут это не работает.

[Юрий Лобанов]

@RainMEN да у Вас там и кроме изображений проблема - описание как-то странно выравнивается.
Учитывая задачу - это не нам всем надо подстраиваться под Ваш пример, а Вам легче переверстать.

[Юрий Лобанов]

@RainMEN на широком экране Вы вообще вот такую бяку получите
i.imgur.com/2k2owAB.png

[Игорь Пушкарский]

Я как раз пытаюсь от этого избавится, проект не мой взял на исправление.

[Юрий Лобанов]

@RainMEN ну так я говорю - переверстайте. Исправьте слайдер, вроде бы задача не выглядит сложной.