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

<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中检查了它现在我能够看到你的问题。

Answer 3

稍微使用css代码

img { margin: auto 0; }

demo

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

try next

Answer 4

你可以使用旧技巧，添加＆＃34; <center>＆＃34;到你的代码

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

你应该确保容器的宽度是100％;）

固定图像的位置

4 个答案: