4

我正在研究电话差距。所以，我需要以通用格式提供代码，以便它适用于任何设备。

我有一个尺寸为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，我的输出---->图像粘在屏幕顶部的上边距，就像我给定了 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.

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

4

3 回答 3

4

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

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

演示

于 2013-06-06T06:45:07.870 回答
3

这行得通——不要忘记在 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%;它们。

于 2013-06-06T07:04:39.960 回答
2

我做了一些挖掘，这就是我想出的宽度以水平和垂直居中图像：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 属性。如果要放大图像，可以更改最大属性。

于 2013-06-06T07:34:33.990 回答