показать полное изображение (высота) с фоном: обложка

Question

Я пишу html-страницу с параллаксом, используя stellar.js. В CSS я использую:

html, body {height: 100%;} 

#slide1 { 
height: auto; 
background-image:url('../images/1.jpg'); 
background-color:#fff; 
background-repeat: no-repeat; 
background-size: cover; 
background-attachment: fixed; } 

Но изображение режется и нижняя части изображения не видно.

Можно ли установить высоту сечения (# slide1), чтобы показать все изображение?

Answer 1

Попробуйте установить свойство # slide1 height на 100% вместо автоматического использования.

Answer 2

Использование background-size:cover; всегда будет обрезать фоновое изображение по вертикали или по горизонтали, за исключением случаев, когда элемент имеет то же соотношение h/w, что и изображение. Ключ должен выбирать и позиционировать фон таким образом, чтобы он по-прежнему выглядел хорошо, когда он был разрезан.

Скорее всего, вы хотите, чтобы ваш элемент а min-height и т.д .:

#slide1 { 
    min-height: 600px; 
} 

Имейте в виде, наиболее популярное соотношение рабочего стола 16: 9, и большинство мобильных устройств в вертикальном положении. При необходимости используйте @media запросов для разных ширины окна устройства/просмотра.

Если вы не хотите, чтобы ваш слайд имел большую высоту, чем высота окна просмотра (высота экрана браузера), добавьте max-height: 100vh!important; к вышеуказанному правилу (полезно на мобильных устройствах).