Question

我正致力于电话差距。因此，我需要以通用格式提供代码，以便它适用于任何设备。

我的图片尺寸为 2350 * 180 。

我试过这些代码..

width: 100%;
top: 100%;
margin-top: 50%;

但是，这些并不是各种设备的核心。

然后我用

尝试了

vertical-align: middle;

然后

display: block;
text-align: center;

然后

<table>
    <tr style="vertical-align: middle;">
        <td id="main" style="width: 100%;">
            <img src="" />
        </td>
    </tr>
</table>

对于上面提到的所有CSS，我的输出----＆gt; 图像粘贴到屏幕顶部的上边距，因为如果我给出了margin-top：0;

请帮助我并纠正我。

对于大图片

，另外2个问题

现在，我有一个背景图片

style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%; "

此代码仅适用于少数..我的代码中是否有任何错误？

第二个问题，就是当我滚动时，滚动条可见。所以我添加了

style="overflow:hidden;"

<img src=""/> tag.

我是正确的还是应该添加任何其他代码？

Answer 1

将max-width:100%添加到图片并将其放在height:100%

的表格中

body, html{
    height:100%;
    margin:0;
    padding:0
}
table{
    height:100%;
    background:#fffad6;
}
img{
    max-width:100%;
}

<强> DEMO

Answer 2

这样做 - 不要忘记在src-attribute中添加image-url。你也可以使用div代替你的桌子。

<强> HTML：

<table>
    <tr>
        <td>
            <img src="" />
        </td>
    </tr>
</table>

<强> CSS：

body, html {
    height: 100%;
    margin: 0;
}

table {
    width: 100%;
    height: 100%;
    text-align: center;
}

img { 
    max-width: 100%;
    vertical-align: middle;
}

注意：如果您的表格周围有父元素，则还需要向其添加height: 100%;。

Answer 3

我做了一些挖掘，这就是我想出的宽度，使图像在水平和垂直方向都居中：http://jsfiddle.net/jdtjk/2/

CSS：

.middle{
    position:absolute;
    top:0;
    bottom:0;
    right: 0;
    left: 0;
    margin: auto; 
}

HTML：

<div>
    <img src="*" class="middle" />
</div>

编辑：

更改了图像缩小以适应窗口大小： http://jsfiddle.net/jdtjk/5/

对CSS的更改：

.middle{
    position:absolute;
    top:0;
    bottom:0;
    right: 0;
    left: 0;
    margin: auto; 
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

如果要限制向上/向下缩放，可以在css中使用min-width min-height属性。如果要升级图像，可以更改最大属性。

如何在任何设备的中心定位图像？

3 个答案: