How to set the image size same for portrait and landscape screen orientation in jquery mobile web application?

Question

I have to add image on the header and background I added header image using following code

<div data-role="header" data-nobackbtn="false" data-theme="a" style="height:30px;background-image:url(test.jpg);background-repeat:no-repeat;">

the image perfectly fixed in the portrait but when the screen changed to the landscape, image not fixed perfectly there will be some blank space added after the image. So how to set the image same for both portrait and landscape screen orientation. This problem occur in Android,iphone ,blackberry ,etc. For more clarification please check the image header.

actually when set the width: auto or 100% is not working ,because the image has some fixed width for example I set image width as 360 px in portrait ,when change to the landscape the image width still same thats the problem. We can't set the width large for landscape because we can't say that all platforms landscape mode screen size is same. that may be varying in Android,iphone etc.

Answer 1

You can set a div tag to hide overflow, then set a regular img tag inside the div and set both to have a width of 100%...

<div data-role="header">
<a data-icon="arrow-l" data-rel="back" href="#" style="z-index:1001;">Back</a>
<div style="overflow:hidden; position:relative; width:100%; height:45px;">
<img src="test.jpg" style="width:100%; height:auto; position:relative;">
</div>
</div>

Some Notes:

• the "height:auto;" sytle on the image can be removed if you are ok with distorting the aspect-ratio of the image when it scales.
• the "z-index:1001;" style on the back button link is necessary because the header is given a z-index of 1000 (so the div around the image is also given a z-index of 1000 unless specified).