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

Posted 2023-03-10

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

【英文标题】：How to set the image size same for portrait and landscape screen orientation in jquery mobile web application?

【发布时间】：2011-02-28 10:14:27

【问题描述】：

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

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

图像完美固定在纵向，但是当屏幕切换到横向时，图像没有完全固定，图像后面会增加一些空白。那么如何为纵向和横向屏幕方向设置相同的图像。这个问题出现在安卓、iphone、黑莓等。如需更多说明，请查看图片标题。

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

【问题讨论】：

可能是一个 css 的东西，制作 div: block 和 width: auto 或 100%

获得更长的图像。这是一个背景，如果太大，它不会突出。还 - 在 .css 中定义样式，而不是作为属性。它可能会被 jqm 删除

【参考方案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-index 为 1000（因此图像周围的 div 的 z-index 也为 1000，除非指定）。