如何在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>

一些注意事项：

• “height:auto;”如果您愿意在缩放时扭曲图像的纵横比，则可以删除图像上的样式。
• “z 索引：1001；”后退按钮链接上的样式是必要的，因为标题的 z-index 为 1000（因此图像周围的 div 的 z-index 也为 1000，除非指定）。