How can I make image not expand its container - html

Question

I want to align all my elements in the middle of my header, however it is impossible since header logo is expanding it.
Example here: http://jsfiddle.net/CPDNr/

Answer 1

Place image as background or set height/width to 100% in css.

Answer 2

use center tag in your header DIV, like this:
<div class="header">
<center>
<div class="logo">
<img src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png" width="90" height ="90" />
</div>
<div class="search">
<input type="text" name="search" placeholder="Search" />
</div>
<div class="user">
</div>
</center>
</div>

Answer 3

<div class="header">
<div style="margin:0 auto;position:relative;display:inline-block !important;">
<div class="logo">
<img src="http://html5doctor.com/wp-content/uploads/2011/01/HTML5_Logo_256.png" width="90" height ="90" />
</div>
<div class="search">
<input type="text" name="search" placeholder="Search" />
</div>
<div class="user">
</div>
</div>
</div>
css:
.header
{
height: 60px;
width: 100%;
text-align:center;
background-color: red;
}

Answer 4

<style type="text/css">
.header {
background: url(http://example.com/path/to/image.jpg) no-repeat center center fixed;
}
</style>
<div class="header">
<div class="search">
<input type="text" name="search" placeholder="Search" />
</div>
<div class="user">
</div>
</div>​
Also, check out this excellent tutorial on full-page background images.

Answer 5

This should do:
img
{
max-width:100%;
max-height:100%;
}