0

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

<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 等中可能会有所不同。

肖像

景观

4

1 回答 1

0

您可以设置一个 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>

一些注意事项：

  • “高度：自动；” 如果您可以在缩放时扭曲图像的纵横比，则可以删除图像上的 sytle。
  • "z-index:1001;" 后退按钮链接上的样式是必要的，因为标题的 z-index 为 1000（因此，除非指定，否则图像周围的 div 的 z-index 也为 1000）。
于 2011-06-10T18:14:42.347 回答