如何让图像不会扩展其容器

Question

我想将我的所有元素都对齐到我的标题中，但是由于标题标志正在扩展它，所以它是不可能的。

实施例这里：http://jsfiddle.net/CPDNr/

Answer 1

将图像作为在CSS背景或设置高度/宽度为100％。在你的头DIV

Answer 2

使用中心的标签，就像这样：

<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>​ 

此外，检查出this excellent tutorial on full-page background images。

Answer 5

这应该这样做：

img 
{ 
max-width:100%; 
max-height:100%; 
}