Question

我尝试将像素更改为百分比，似乎没有任何效果。如果我在1920x1080制作，然后切换到较低的分辨率，网站看起来都很混乱和奇怪。

这是CSS代码：

body
{
    margin: 0px;
    padding: 0px;
    background: url("images/Background.png")
}

#header
{
    position: absolute;
    top: -160;
    left: 420;
    right: 0;
}

.headerImage1 
{
    margin: 0px;
    padding: 0px;
    position: absolute;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
}

以下是不同分辨率的样子:(正确的方法是居中）

http://puu.sh/6RgHg.jpg

编辑：HTML部分：

<body>
<div id="header">
    <div class="headerImage1">
        <img src="images/Header.png">
    </div>

Answer 1

我认为这会导致你的比例因使用而下降：

width:100%;
height:100%;

请改为尝试：

width: 100%;
height: auto;

这样的口粮不会搞砸，如果你想让背景不搞乱，试试这个：

background: url("images/Background.png") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

编辑：

如果您的意思是图像居中，绝对位置是浏览器的绝对大小，全屏。而亲戚是当前的角色。我会将亲戚用于跨设备目的。

定位 - 为什么它会破坏分辨率？

1 个答案:

编辑：