RainMEN
@RainMEN
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.

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

Добрый день!
Суть такая есть слайдер в нем картинка на ширину окна браузера 1920px.
На картинке нарисован какой то отцентрованный элемент например человек, при уменьшении окна браузера
этот человек начинает прижиматься к правому краю, естественно не хочется такого видеть, и не хочется сжимать картинку по высоте, то есть картинка должна обрезаться с обеих сторон одновременно и равномерно, как этого достичь?
  • Вопрос задан
  • 5573 просмотра
Пригласить эксперта
Ответы на вопрос 4
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
codepen.io/iiil/pen/meAJx
Насчет поддержки только уточните.

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

background-size: cover | contain - вам не подойдёт?
Ответ написан
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
Cover - работает нормально, только вот позиционирование нужно ставить 50% 50%;

А если нужен элемент по центру, то
.centered { position: absolute; top: 50%; left: 50%; margin-top: -высотаЭлемента/2; margin-left: -ширинаЭлемента/2;}
Ответ написан
RainMEN
@RainMEN Автор вопроса
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.
В общем что бы не играть в сломанный велосипед вот сайт ues.7-px.ru/.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы