Question

我的黑客中心有一个徽标，这是一张gif图片。

我的gif图像详细信息显示为842X595尺寸。

但是当我把我的图像放在我的网站上时，图像非常小，我不知道为什么。

所以，我需要改变图像的宽度和高度，我在css中说我的图像应该有400px的宽度和300px的高度。

我希望我的图像边距高于10px，低于我的图像边距10px。

我想要像我的形象1：

图片1

enter image description here

但是我得到的是我的图像2，我的图像周围有一个很大的白色空间，我不想要这个。

你知道为什么会发生这种情况吗？

图片2：

enter image description here

我在这个小提琴中遇到了问题：http://jsfiddle.net/Zc6hJ/

我的HTML：

<body>
<a name="topo"/>
<header id="topo-container">
    <div id="topo">
      <a href=""><img src="http://s9.postimg.org/zcjt6m1tr/logo_web2.gif"/></a>

    </div>
</header>
<section id="menu-container">   
   <nav id="menu">
   </nav>
</section>
</body>

的CSS：

*
{
    margin:0;
    padding:0;
    border:0;
    outline:none;
    background:#ccc;
}

#topo-container{
    width:100%;
    float:left;
    height:auto;
    margin:0 auto 0 auto;
}

#topo{width:100%;
    margin:10px auto; }

#topo img {
    margin:10px auto;
    display:block;
    width:400px;
    height:300px; 
    background:yellow;
}

#menu-container
{
    width:100%;
    height:62px;
    float:left;
    background:red;  
    z-index:7;
    float:left;
}

#menu
{
    width:1160px;
    height:auto;
    margin:0 auto 0 auto;

}

Answer 1

你遇到的问题是图片本身周围有很多空白区域。我复制了你的照片和cropped it，或者按照你想要的方式裁剪它。

我的保证金：10px auto;对于我的徽标图像，它无法正常工作

1 个答案: