Увеличенное изображение при большом разрешении?

Question

[Max]

Здравствуйте, нужно сделать слайдер на всю ширину страницы, в данный момент использую плагин fullPage.js . На телефоне и планшете все отлично, но на большом экране картинка стает увеличенной и пол изображения обрезается. Пропорции непонятно соблюдаются.
Размер картинки 1920x1080

#slide1 {
    background-image: url(img/01.jpg);
    background-position-x: center;
    background-size: cover;
}

Настоящее фото
Фото на странице Ссылка, если необходимо

Answer 1

[Максим Тимофеев]

background-size: cover; вписывает изображение без его деформации так что бы полностью заполнить контейнер. Так что все работает верно. Возможно вам надо: background-size: contain; или задать правильное соотношение сторон для контейнера

Comments

[Max]

Обновил вопрос и добавил ссылку) Буду благодарен если посмотрите, а то уже второй день играюсь с этим. contain не помогает, а пропорции (возможно не так задаю) искажают содержимое.

[Ankhena]

Max: все логично

cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

COVER
Дальше смотрите пропорции картинки и окна браузера. Если у нее высота "наступила раньше", то ширина будет выпирать за блок.

[Max]

Ankhena W: выходит, что ширина или высота по-любому будет обрезаться?

[Ankhena]

Max: ну можно растянуть девушку в ширь или в высь, как на Ваш вкус симпатичнее, поставив background-size: 100%
:)

[Max]

Ankhena W: Ахахах, спасибо)

[Максим Тимофеев]

Ankhena W: А пропорции? Если хотите что бы картинка растягивала блок родительский, вставьте ее как картинку, а не как background и задайте ей width:100%;

[Ankhena]

Максим Тимофеев: ну и как получится фулл-скрин при этом?

[Максим Тимофеев]

Ankhena W: фулл-скрин никак