Question

我正在使用模板在网站上工作，我正在尝试使图像的高度与标题大小相同。但每当我改变图像大小时，它也会拉伸标题。这是代码。

＆＃13;

    body {
    	background: url(../newImages/headerBackground.jpg) repeat;
    	font-family: Arial, Helvetica, sans-serif;
    	//font-size: 14px;
    	margin: 0;
    	padding: 0;
           
    }

    #header {
    	background: url(../images/bg-header.png) repeat-x bottom center;
    	margin: 0;
    	padding: 0 0 20px;
    }
    
    #header img {
    	display: block;      
    	height: 190px;
    	margin: 0 auto;	
    	width: 230px;
            margin-left:0px;
            margin-top:2px;
            
            
    }
    
    #header ul {
    	background: url(../images/menu-border.gif) no-repeat bottom left;
    	margin: 0 auto;
    	overflow: hidden;
    	padding: 0 0 0 1px;
    	width: 970px;
            position:relative;
            left:5%;
           
            
    }

＆＃13;

       <!DOCTYPE HTML>
        <!-- Website Template by freewebsitetemplates.com -->
        <html>
        <head>
        	<meta charset="UTF-8">
        	<title>Academy Website Template</title>
        	<link rel="stylesheet" href="css/site.css" type="text/css">
        </head>
        <body>
        	<div id="header">
                    <img src="http://placehold.it/230x190">
        		<ul>
        			<li class="selected">
        				<a href="index.html">home</a>
        			</li>
        			<li>
        				<a href="about.html">Opportunities</a>
        			</li>
        			<li>
        				<a href="admission.html">Project Management</a>
        			</li>
        			<li>
        				<a href="programs.html">About Jay</a>
        			</li>
        			<li>
        				<a href="calendar.html">Community</a>
        			</li>
        			<li>
        				<a href="blog.html">Contact</a>
        			</li>
        			
        		</ul>
        	</div>
</body></html>

＆＃13;

Answer 1

我认为这就是你想要的。

http://codepen.io/anon/pen/bNbLLM

为了测试目的，我删除了一些代码（ul列表）。

也注意到CSS上的一些错误。

删除或填充填充：0

#header {
    padding: 0 0 20px;
}

卸下：

#header img {
    margin-top:2px;
}

Answer 2

我会尝试将以下行添加到您的css文件中：

#header {
     padding: 0px;
}

似乎无法在不更改标题大小的情况下更改图像大小

2 个答案: