CSS Responsive BG Images - css, html5

Próbuję utworzyć witrynę paralaksy o pełnej szerokości i problem z uzyskiwaniem obrazów tła w celu poprawnego skalowania sekcji.

Jak uzyskać obraz o pełnej szerokości na pulpiciewidok zmniejsza się i zawiera 100% szerokości, ale skurcz wysokości i obraz zawierają proporcje, aby pasowały do ​​szerokości? Problem, który mam, to „nie mogę ustawić kontenera w tle, aby mieć maksymalną wysokość.

Naprawdę szukam sposobu na wysokośćzmniejszaj się ze 100% w dół, gdy rzutnia staje się coraz mniejsza, tak że ostrość obrazu nie jest tracona i zachowuje proporcje, tak jak odpowiadałby obraz.

Próbowałem wielkości tła: zawierają również, ale nawet wtedy pojemnik musi mieć stałą wysokość, która musi się zmienić, gdy obraz tła kurczy się, ponieważ w przeciwnym razie obraz nie będzie płynny z pojemnikiem.

#main-photo {
background-image: url("images/main.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 130px;
height: 100%;
width: 100%;
}

Jeśli usunę wysokość, w przeglądarce nic się nie wyświetla, a max-height nie działa tak, jak w przypadku responsywnych obrazów.

Czy ktoś może mi pomóc z tym efektem?

Odpowiedzi:

Musisz użyć background-size: contain zamiast background-size: cover. Demo tutaj

#main-photo {
background-image: url("images/main.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 100%;
width: 100%;
}

Znalazłem rozwiązanie za pomocą sztuczki dopełniającej, która dodaje wysokość i pozwala obrazowi zachować proporcje. Dziękuję Ci!

Poprostu dodaj

padding-bottom: %here

Nie musisz określać wysokości obrazu tła tylko o 100% szerokości.

Oto świetny artykuł. http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/