CSS Div Фоновое изображение Фиксированная высота 100% Ширина

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

В настоящее время у меня есть: http://jsfiddle.net/ndKWN/

CSS

    #main-container {
        float:left;
        width:100%;
        margin:0;
        padding:0;
        text-align: center;
    }

    .chapter{
        position: relative;
        height: 1400px;
        z-index: 1;
    }

    #chapter1{
    background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
        height:1200px;
    }

    #chapter2{
    background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
        height:1200px;
    }

Ответ 1

См. мой ответ на аналогичный вопрос здесь.

Похоже, вы хотите, чтобы фоновое изображение сохраняло его собственное соотношение сторон, расширяясь до 100% ширины и обрезая сверху и снизу. Если это так, сделайте что-то вроде этого:

.chapter {
    position: relative;
    height: 1200px;
    z-index: 1;
}

#chapter1 {
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

jsfiddle: http://jsfiddle.net/ndKWN/3/

Проблема с этим подходом заключается в том, что у вас есть элементы контейнера на фиксированной высоте, поэтому может быть пространство ниже, если экран достаточно мал.

Если вы хотите, чтобы высота сохраняла пропорции изображения, вам нужно будет сделать что-то вроде того, что я написал в редактировании, на ответ, который я связал выше. Установите контейнер height равным 0 и установите padding-bottom в процентах от ширины:

.chapter {
    position: relative;
    height: 0;
    padding-bottom: 75%;
    z-index: 1;
}

#chapter1 {
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

jsfiddle: http://jsfiddle.net/ndKWN/4/

Вы также можете поместить процент padding-bottom в каждый стиль #chapter, если каждое изображение имеет другое соотношение сторон. Чтобы использовать разные пропорции, разделите высоту исходного изображения на свою собственную ширину и умножьте на 100, чтобы получить процентное значение.

Ответ 2

http://jsfiddle.net/ndKWN/1/

Вы можете использовать background-size: cover;

Ответ 3

Но дело в том, что класс .chapter не является динамическим, вы объявляете высоту: 1200px

поэтому лучше использовать background: cover и установить с помощью медиа-запросов определенную высоту для популярных разрешений.