CSS Div Hintergrundbild Feste Höhe 100% Breite

Ich versuche, eine Reihe von Divs mit einem Hintergrundbild, die jeweils ihre eigene feste Höhe haben, zu strecken und strecken, um die Breite aufzufüllen, auch wenn es einen Überlauf auf der Oberseite gibt/bottom das ist abgeschnitten. Ich will nur nicht den weißen Platz an den Rändern.CSS Div Hintergrundbild Feste Höhe 100% Breite

Derzeit habe ich: 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; 
    }

Quelle

2013-03-30 TheButlerDidIt

"Leerzeichen an den Rändern" ... Meintest du die "globale" Polsterung des Körpers? Dann versuche: 'body {padding: 0px; Rand: 0px; } '? –

Das Körperpolster und der Rand sind beide 0; Das Problem tritt auf, wenn Sie die Seite in einem Browser mit einer Breite anzeigen, die die Breite des Bilds überschreitet. Das Hintergrundbild wird nicht horizontal ausgefüllt. – TheButlerDidIt

Siehe meine Antwort auf eine ähnliche Frage here verwenden können.

Es klingt, als ob Sie ein Hintergrundbild möchten, das sein eigenes Seitenverhältnis bei der Erweiterung auf 100% Breite behält und oben und unten abgeschnitten wird. Wenn das der Fall ist, so etwas wie folgt aus:

.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/

Das Problem bei diesem Ansatz ist, dass Sie die Containerelemente in einer festen Höhe haben, so kann es Raum sein, wenn unter dem Bildschirm ist klein genug.

Wenn Sie möchten, dass die Höhe das Seitenverhältnis des Bildes beibehält, müssen Sie etwas tun, was ich in einer Bearbeitung zu der Antwort geschrieben habe, die ich oben verlinkt habe. Stellen Sie den Behälter des height auf 0 und setzen Sie den padding-bottom auf den Prozentsatz der Breite:

.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/

Sie auch den padding-bottom Prozentsatz in jedem #chapter Stil setzen könnte, wenn jedes Bild ein anderes Seitenverhältnis hat . Um unterschiedliche Seitenverhältnisse zu verwenden, teilen Sie die Höhe des Originalbildes durch seine eigene Breite und multiplizieren Sie mit 100, um den Prozentwert zu erhalten.

Quelle

2013-05-02 14:12:28 cr0ybot