0

ヘッダーと背景に画像を追加する必要があります。次のコードを使用してヘッダー画像を追加しました

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

画像は縦向きでは完全に固定されていますが、画面が横向きに変わると、画像が完全に固定されず、画像の後に空白が追加されます。したがって、縦向きと横向きの両方の画面の向きで同じ画像を設定する方法。この問題は、Android、iphone、blackberry などで発生します。詳細については、画像ヘッダーを確認してください。

実際に幅を設定すると、autoまたは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>

いくつかのメモ:

  • 「高さ：自動;」拡大縮小時に画像の縦横比を歪めても問題ない場合は、画像のスタイルを削除できます。
  • 「z-index:1001;」ヘッダーには 1000 の z-index が与えられているため、[戻る] ボタン リンクのスタイルが必要です (したがって、指定されていない限り、画像の周りの div にも 1000 の z-index が与えられます)。
于 2011-06-10T18:14:42.347 に答える