CSS：固定还是浮动布局？

我的问题围绕CSS固定布局和浮动布局,扩展以填充浏览器的宽度.

现在我遇到的问题是根据页面的宽度调整标头大小(根据CSS3’s background-image: size;的当前浏览器实现,我理解的是不可能的).在这一点上,我觉得我已经陷入了僵局：我是否在网站上修改使用固定的CSS布局,或者我是否保持当前布局并尝试扩展标头图像以填充提供的大部分空间？此外,移动到固定宽度布局的优点和缺点是什么,以及使用一种布局而不是另一种布局的其他(看不见的)分支？

有问题的网站将作为对此问题的评论给出 – 我不希望被视为试图增加流量.

编辑：还有其他想法吗？

如果在调整浏览器大小的同时显示更多或更少的图像,而不是缩放图像呢？它的效果并不完全相同,但它是用图像填充整个空间的简单方法.

让我们假设,为了示例,您的标头背景图像包含某种类型的徽标,例如,城市天际线的照片.总的来说,这是1600px宽.徽标位于图像的左侧,而城市景观则向右延伸.我们假设您的标记看起来大致如下：

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

我们可以将#page元素设置为elastic宽度并将背景图像应用于#masthead元素：

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

这里发生的是#masthead元素将扩展到#page元素的宽度,这将在800px到1600px宽(包括)之间,具体取决于浏览器窗口的宽度.当#page元素宽度为800px时,您只能看到最左侧800px的天际线;当它宽1600像素时,你会看到整个天际线.这样,您的徽标始终可见,当浏览器调整大小时,会显示更多的城市景观.

这确实需要一个较大的图像开始(至少与你的最大宽度一样宽,如果你弹性),但结果是一个看起来不错的标头,无论它的大小 – 不依赖,如strager提到,浏览器的图像大小调整算法.