How can I make image not expand its container

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

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 2

将图像放置为背景或将css中的高度/宽度设置为100％。

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%;
}