如何使图像不扩展其容器

Question

我想在标题中间对齐所有元素，但是由于标题徽标正在扩展它，所以不可能。

此处示例：http://jsfiddle.net/CPDNr/

Answer 1

在标题DIV中使用中心标记，如下所示：

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

另外，请查看this excellent tutorial on full-page background images。

Answer 5

这应该做：

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