Obraz w tle CSS Div Naprawiono wysokość 100% Szerokość

Próbuję ustawić serię elementów div z obrazem tła, który ma własną stałą wysokość i rozciągnąć, aby wypełnić szerokość, nawet jeśli na wierzchu znajduje się nadmiar/dół, który jest obcięty. Po prostu nie chcę białej przestrzeni na krawędziach.Obraz w tle CSS Div Naprawiono wysokość 100% Szerokość

Obecnie mam: 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; 
    }

Źródło

2013-03-30 TheButlerDidIt

"białe znaki na krawędziach" ... Czy chodziło ci o "globalne" wypełnienie ciała? Następnie spróbuj: 'body {padding: 0px; margin: 0px; } '? –

Wypełnienie i margines ciała to 0; Problem pojawia się, gdy przeglądasz stronę w przeglądarce o szerokości przekraczającej szerokość obrazu. Obraz tła nie wypełnia się w poziomie. – TheButlerDidIt

Zobacz moją odpowiedź na podobne pytanie here.

Wygląda na to, że chcesz zachować obraz w tle, aby zachować jego własny współczynnik proporcji, a jednocześnie rozszerzyć do 100% szerokości i przyciąć go na górze i na dole. Jeśli o to chodzi, czy coś takiego:

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

Problem z tego podejścia jest to, że masz elementy pojemnika w stałej wysokości, więc nie może być przestrzeń poniżej, jeśli na ekranie jest wystarczająco mały.

Jeśli chcesz, aby wysokość utrzymywała proporcje obrazu, musisz zrobić coś w rodzaju tego, co napisałem w edycji, do odpowiedzi, którą podałem powyżej. Ustawić pojemnik na height 0 i ustawić padding-bottom procentowi szerokości:

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

Można też umieścić padding-bottom procent w każdym #chapter stylu jeśli każdy obraz ma inne proporcje . Aby użyć różnych współczynników proporcji, podziel wysokość oryginalnego obrazu według jego własnej szerokości i pomnóż przez 100, aby uzyskać wartość procentową.

Źródło

2013-05-02 14:12:28 cr0ybot