Zmiana obrazów w zależności od orientacji urządzenia

Question

Buduję podstawową aplikację internetową przy użyciu aplikacji PhoneGap dla lokalnej firmy. Utworzyłem dwa obrazy dla nagłówka/banera u góry aplikacji. Jeden jest zoptymalizowany pod kątem orientacji pionowej, a drugi zoptymalizowany pod kątem krajobrazu. Chcę móc wyświetlić jeden z nich w zależności od sposobu trzymania urządzenia. Czytałem o zapytaniach o media i szczerze mówiąc było to trochę zbyt skomplikowane dla moich potrzeb, ponieważ JQuery mobile zajmie się resztą funkcjonalności dla mnie, a ja używam tylko jednego CSS dla całej aplikacji.

Czy ktoś ma kilka prostych linii kodu, które mogę dodać, aby pomóc rozwiązać ten problem?

Answer 1

Można użyć zapytań o media CSS dla orientacji pionowej i poziomej, nie jest skomplikowany w ogóle:

@media screen and (orientation: portrait) { ... } 
@media screen and (orientation: landscape) { ... } 

Korzystanie z tych zapytań multimedialnych mogą przesłonić background-image dla dowolnej orientacji.

Oficjalna dokumentacja: http://www.w3.org/TR/css3-mediaqueries/#orientation

Istnieją dwa sposoby korzystania z niej:

przypuszczać masz <div> z klasą header:

@media screen and (orientation: portrait) 
{ 
    div.header { background-image:url(image1.jpg); } 
} 
@media screen and (orientation: landscape) 
{ 
    div.header { background-image:url(image2.jpg); } 
} 

Alternatywnie, możesz użyć <img> tagi. W takim przypadku będziesz potrzebował dwóch z nich i ukryj/pokaż tylko jeden z regułami CSS. Powiedzmy, <img> znaczniki mają zajęcia header-land i header-portrait odpowiednio:

@media screen and (orientation: portrait) 
{ 
    .header-land { display:none; } 
    .header-portrait { display:inline-block; } 
} 
@media screen and (orientation: landscape) 
{ 
    .header-land { display:inline-block; } 
    .header-portrait { display:none; } 
} 

Answer 2

Jest to odpowiedź na temat korzystania zapytania mediów, jest to dość łatwy sposób, aby rozwiązać ten problem. Ale jeden warunek jest to, że jest w porządku, aby pokazać obrazy jak CSS środowisk, a nie jako <img ... />

Pseudo kod

.my-banner { 
    ...declarations like: 
    background-position: 
    border: 
    margin: 
    padding: 
} 
@media all and (max-width: 320px) { 
    .my-banner { 
    background-image: url(portrait.png); 
} 
@media all and (min-width: 321px) { 
    .my-banner { 
    background-image: url(landscape.png); 
}