jquery - 固定图像的位置

Question

我正在按照链接创建页眉和页脚，并根据图像的大小将图像放置在页眉和页脚之间。

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

但问题是页眉和页脚之间的图像垂直滚动。我怎样才能避免它并将其修复到中心？

Answer 1

看看我的另一种方法。我决定不使用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;
}

我还对您的主要项目类做了一些改动：

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

Answer 2

您可以使用旧技巧，将“ <center>”添加到您的代码中

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

你应该确保容器的宽度是 100% ;)

Answer 3

稍微使用css代码

img { margin: auto 0; }

演示

如果你想要图像的全屏，那么

下一个试试

Answer 4

<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>

请检查上面的代码。我不确定这是你的期望（图像的中心对齐）

哦，好的，我猜这是浏览器兼容的问题。我已经检查了它 chrome 并且我没有得到任何滚动但是之后我在 Firefox 中检查了它现在我可以看到你的问题。