顯示圖像，使圖像停留在同一個地方調整窗口

Question

我建立一個移動應用程序與HTML5，並與jQuery Mobile的後，我想要做的是顯示2張圖片，一個在右邊，另一個在左側。調整窗口瀏覽器的大小時，圖像不應該消失，並且一直顯示在右側和左側，因此它適合不同的手機屏幕。

我試圖使用CSS： float:right，left:85% ...

但調整隻是消失....

Answer 1

沒有看到任何代碼後，我不知道你已經嘗試了什麼。如果你想對這些圖象不與滾動移動

<div style="position:fixed;left:0;"><img src="fakeimageurl.jpg" width="100" /></div> 
<div style="position:fixed;right:0;"><img src="fakeimageurl.jpg" width="100" /></div> 

或...

<div style="position:absolute;left:0;"><img src="fakeimageurl.jpg" width="100" /></div> 
<div style="position:absolute;right:0;"><img src="fakeimageurl.jpg" width="100" /></div> 

Answer 2

Here is an example讓你開始：但是你可以使用以下實現這一目標。嘗試重新調整瀏覽器的大小。

我建議使用僞before和after選擇器來創建你的背景圖像的標記，因爲這不是你想要的語義是在頁面上

基本標記：

<div id="main"> 
    Page content 
</div> 

基本CSS：

#main { position: relative; z-index: 1 } 
#main:before { content: ''; z-index: -1; position: absolute; top:0; bottom: 0; left: 0; right: 50%; } 
#main:after { content: ''; z-index: -1; position: absolute; top:0; bottom: 0; right: 0; left: 50%; } 

top:0，bottom:0將元素延伸到f該目標容器（#main），而left/right0/50%的ULL高度佔據適當的一半。

現在設置在before和after定義的背景圖片。對於縮放背景圖片，您也可以使用background-size，但這可能不是必需的。