0

我需要在我的移动网站页面的开头和中间有一张图片，如下图所示：

在此处输入图像描述

我如何在 jquery mobile 中实现这一点？我需要一个解决方案，无论用户使用什么屏幕（移动设备），都将图像始终放在中间。还有一种方法可以使图像根据屏幕看起来更大或更小吗？喜欢在每个不同的屏幕上采用吗？

从 jquery mobile 站点，当我使用 codiqa 在页面的开头和中间创建图像时，代码如下所示：

<div style="width: 288px; height: 100px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
            <img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px">
</div>

但是定位不正确，并且边距以像素为单位而不是百分比，我猜这是错误的。

有任何想法吗？

4

3 回答 3

3

工作示例：http: //jsfiddle.net/Gajotres/5T78X/

HTML： 

    <div data-role="page" id="index">
        <div data-theme="b" data-role="header">
            <h1>Index page</h1>
        </div>

        <div data-role="content" id="content">
            <div style="width: 100%; height: 100%; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
                <img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px"/>
            </div>
        </div>
    </div>

CSS：

#content {
    position:absolute;
    top:40px;
    right:0;
    bottom:0;
    left:0;
}
于 2013-06-04T12:26:22.043 回答
1

我认为这更像是：http: //jsfiddle.net/5T78X/28/

HTML

<div data-role="page" id="index">
    <div data-role="content" id="content">
        <figure id="topimg">
            <img src="http://codiqa.com/static/images/v2/image.png" alt="image" />
        </figure>
    </div>
</div>

CSS

#topimg {
    text-align: center; /* center the image */
    margin: 1em; 
    border: 4px solid blue;
    border-radius: 5px;
}
#topimg img {
    display: inline-block;  /* treat the img like text */
    max-width: 60px; /*resolution of the img*/
    width: 10%; /* shrink to 10% if lower than 60px */
    margin: 3em auto;  /* add space between top and bottom edge of container */
}

我假设[data-role="page"] { width: 100%; margin:0;}仍然设置。

强烈建议不要将样式混合到标记中。在我看来，使用固定位置和离散像素值移动图像也不合适。

于 2014-02-12T13:48:05.870 回答
1

CSS

img {
    display: block;
    margin: auto;
}
于 2016-12-25T06:47:09.467 回答