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

Question

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 when i change the screen to Landscape the image not resized. Can anyone give me some guidelines?

Answer 1

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.

Answer 2

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