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/