resize the image according to the portrait and landscape in jquerymobile?

I have to add image on the header and background . Is it possible to set the image automatically resizing according to the screen orientation (portrait and Landscape). I set the image in portrait resolution , But whe开发者_如何转开发n i change the screen to Landscape the image not resized. Can anyone give me some guidelines?

---

Support for this is built into jQuery Mobile. There are two Orientation Classes which are present depending on the current screen orientation:

.portrait {
    /* portrait orientation changes go here! */
}
.landscape {
    /* landscape orientation changes go here! */
}   

Or if you want a javascript event you can bind to orientationchange.

---

I don't think there are events that get triggered when the phone goes for landscape to portrait.You can however write a custom function to find out the current orientation. Write the following code on window.resize event.

$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();

if(width>height) {
  // Landscape
  $("#img").attr("src","landscapeurl");
} else {
  // Portrait
  $("#img").attr("src","portraiturl");
}
});

code from Here

---

It's recommended to use CSS3 media queries as the jQuery mobile orientation classes are deprecated: http://jquerymobile.com/demos/1.0b2/docs/api/mediahelpers.html

For a demo of CSS3 media queries: http://www.webdesignerwall.com/demo/media-queries/

---

i use this css3 rule:

@media (orientation: landscape) {

#home-feature span  {
  display  : inline-block;
}

}

more info: http://www.w3.org/TR/css3-mediaqueries/