修復圖像的位置

我正在按照鏈接創建頁眉和頁腳，並根據圖像的大小在頁眉和頁腳之間放置圖像。修復圖像的位置

link is http://jsfiddle.net/Gajotres/yndsW/

但問題是頁眉和頁腳之間的圖像是垂直滾動。我該如何避免它並將其修復到中心？

來源

2013-05-07 Beginner

爲什麼不嘗試使高度：100％;在img上？ – bot 2013-05-07 07:19:06

看看我的另一種方法。而不是使用img標籤我決定使用背景圖像，讓css來處理居中。 Javascript只是需要動態更改圖片。

我們仍然需要javascript來修復我們的頁面高度。我已經郵寄了你的工作項目。

HTML：

<div data-role="page" id="Windage"> 
    <div data-theme="a" data-role="header" data-position="fixed"> 
     <h3>Header</h3> 
    </div> 


    <div data-role="content"> 

    </div> 

    <div data-theme="a" data-role="footer" data-position="fixed"> 
     <h3> 
      <a href="#" data-role="button" data-inline="true" data-transition="slide">NEXT</a> 
     </h3> 
    </div> 
</div>

CSS：

html,body{ 
    height:100%; 
} 

.ui-content { 
    background-repeat:no-repeat; 
    background-size:contain; 
    background-position: center center; 
}

的Javascript：

$(document).on('pageshow', '#Windage', function(){  
    $('[data-role="content"]').height(getRealContentHeight()); 
    $('.ui-content').css('background-image','url(Image/timer.png)');  
}); 

function getRealContentHeight() { 
    var header = $.mobile.activePage.find("div[data-role='header']:visible"); 
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible"); 
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible"); 
    var viewport_height = $(window).height(); 

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); 
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) { 
     content_height -= (content.outerHeight() - content.height()); 
    } 
    return content_height; 
}

我也做了一個輕微的變化t o您的主要項目類別：

public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    super.setIntegerProperty("loadUrlTimeoutValue", 360000); 
    super.loadUrl("file:///android_asset/www/index.html");  
}

來源

2013-05-07 13:07:33 Gajotres

<div data-role="content" align="center"> 
    <div class="ui-center-image"> 
    <img src="http://www.wholelifepetsblog.com/wp-content/uploads/2012/11/cute-puppy.jpg" height="100%" width="auto"/> 
    </div> 
</div>

請檢查以上代碼。我不確定這是你的期望（只是圖像的中心對齊）

噢好的，這是瀏覽器兼容的問題，我猜。我檢查了它鉻，我dint得到任何滾動，但之後，我已經在Firefox中檢查它，現在我可以看到你的問題。

來源

2013-05-07 07:28:09

我也嘗試過上述解決方案。但它沒有任何區別 – Beginner 2013-05-07 08:41:05

我在模擬器上嘗試它 – Beginner 2013-05-07 08:48:49

使用CSS代碼有點

img { margin: auto 0; }

demo

，如果你想在全屏幕的圖像，然後

try next

來源

2013-05-07 09:29:33 Sameertha

它不適用於設備。靜止圖像正在滾動。 – Beginner 2013-05-07 09:52:53

你可以使用一個老把戲，加「<center>」到您的代碼

<center> <img src="http://www.wholelifepetsblog.com/wp-content/uploads/2012/11/cute-puppy.jpg" height="100%" width="auto"/> </center>

你應該確保該容器的寬度爲100％;）

來源

2013-05-07 10:04:01

修復圖像的位置

回答

相關問題