Question

我使用GIMP创建了一个图像，并将其导入我正在创建的网站中。出于某种原因，当我调整浏览器大小时，它不希望居中。另外，除非我将它的位置设置为绝对位置，否则它会移动到页面的中间位置（我想要中心，顶部）。我认为它与图像的大小有关。它是1920x1080，我使用这个尺寸是因为它的质量，但我认为当我导入它时背景会被使用。我已经尝试了Gimp中的所有内容来剪切背景。关于代码的任何建议或如何在GIMP中解决这个问题都会很棒。

<div id="logo">
    <img src="DTW Logo\DTW2_Logo_ColombianFlagColorTOPcropped.png" >
</div>

body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}

#logo{
margin: -368px 450px 0px 0px;
position: absolute;
width: 100%;

}

Answer 1

在百分比衡量中使用css width 属性，并在 margin 上设置 auto 左右两侧，

CSS

#logo{
    margin:0px auto;
    top:0px;
    width:100%;
    text-align: center;
}

查看此演示jsFiddle

将图像宽度设置为百分比：

img{
    width: 15%;
    /*width: 75px */
}

查看jsFiddle

Answer 2

希望你看起来像这样

<强> HTML

<div id="logo">
    <img src="http://aoyouth.org.uk/wp-content/uploads/2012/12/home-icon.png">
</div>

<强> CSS

img{
    max-width:100%;
}
#logo {
    width: 100px;
    margin:0 auto; 
    position:absolute;
    left:0; right:0; top:50%;  
}

Fiddle Demo

当我更改浏览器大小时，无法将图像置于中心位置

2 个答案:

CSS