<分区>
我的问题围绕着 CSS 固定布局与扩展以填充浏览器宽度的 float 布局。
现在我遇到的问题是根据页面宽度调整 header 的大小(据我所知，鉴于当前浏览器对 CSS3's background-image: size; 的实现，这是不可能的)。在这一点上，我觉得我已经陷入了僵局:我是重新设计网站以使用固定的 CSS 布局，还是保持当前布局并尝试扩展 header 图像以填充提供的大部分空间？此外，移动到固定宽度布局的优缺点是什么，以及使用一种布局替代另一种布局的其他(看不见的)后果是什么？
相关网站将作为对此问题的评论给出——我不想被视为试图增加访问量。
编辑:还有其他想法吗？
最佳答案
当浏览器调整大小时显示或多或少的图像，而不是缩放图像怎么样？这不是完全相同的效果，但它是一种用图像填充整个空间的简单方法。
为了便于举例，我们假设您的 header 广告背景图片在城市天际线照片之上包含某种 Logo 。总的来说，这是 1600px 宽。 Logo 位于图像的左侧，而城市景观则延伸到最右侧。我们假设您的标记大致如下所示:
<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 元素的宽度，宽度介于 800 像素和 1600 像素之间(含)，具体取决于浏览器窗口的宽度。当#page 元素为 800 像素宽时，您只能看到天际线最左边的 800 像素；当它的宽度为 1600 像素时，您可以看到整个天际线。这样您的 Logo 始终可见，并且在调整浏览器大小时，会显示更多城市景观。
这确实需要有一个更大的图像开始(至少和你的最大宽度一样宽，如果你有 flex 的话)，但结果是一个无论大小都好看的 header - 无需依赖正如 strager 提到的，关于浏览器的图像大小调整算法。
关于CSS:固定布局还是 float 布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/329900/