如何在jquery移动Web应用程序中为纵向和横向屏幕方向设置相同的图像大小？

Question

我必须在标题和背景上添加图像我使用以下代码添加标题图像

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

图像完美固定在肖像中，但当屏幕变为横向时，图像未完全固定，图像后会添加一些空白区域。因此，如何为纵向和横向屏幕方向设置相同的图像。在Android，iPhone，黑莓等中会出现此问题。有关更多说明，请查看图像标题。

实际上在设置宽度时：自动或100％不起作用，因为图像有一些固定的宽度，例如我将图像宽度设置为360像素的纵向，当更改为横向图像宽度仍然相同时问题。我们不能为景观设置大的宽度，因为我们不能说所有平台的横向模式屏幕尺寸都相同。在Android，iphone等中可能会有所不同。

Answer 1

你可以设置一个div标签来隐藏溢出，然后在div中设置一个普通的img标签，并将两者都设置为宽度为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>

一些注释：

• “身高：自动;”如果可以在缩放图像时扭曲图像的纵横比，则可以删除图像上的图案。
• “z-index：1001;”后退按钮链接上的样式是必要的，因为标题的z索引为1000（因此除非指定，否则图像周围的div也会被赋予z-index 1000。）