What about revealing more or less of the image as the browser is resized, rather than scaling the image? It's not quite the same effect, but it's an easy way to fill an entire space with an image.
Let's assume, for the sake of the example, that your masthead's background image contains a logo of some sort on top of, say, a photograph of a city skyline. This is, overall, 1600px wide. The logo sits to the left of the image while the cityscape extends far right. And we'll assume your markup looks roughly like this:
What happens here is that the #masthead element will expand to the width of the #page element, which will be somewhere between 800px and 1600px wide (inclusive) depending on how wide the browser window is. When the #page element is 800px wide, you see only the left-most 800px of the skyline; when it's 1600px wide, you see the entire skyline. That way your logo is always visible and when the browser is resized, more of the cityscape is revealed.
This does require having a larger image to start with (at least as wide as your max-width, if you go elastic), but the result is a masthead that will look good no matter what size it is--without relying on, as strager mentioned, browsers' image resizing algorithms.
What kind of image is it? Is any part of it repeatable? Sometimes using two layers, one or the tag for a repeating element of the image and another for the fixed element.
Can we see an example? It would be easier to get to the right answer for your problem.
If you are trying to expand your background-image to the width of your page, it is better to use a fixed-sized layout as there is no cross-browser method to making a background-image expand to varying sizes that are dependent on the visitors resolution.
Fixed width layouts provide more flexibility for the designer, but not for the visitor. If you create a layout that is X pixels wide, then you are able to fine-tune your website pixel-by-pixel to your liking whereas "float" layouts (I call them liquid layouts) are based entirely on percent values and therefore differ from computer-to-computer. I find this difficult because you can test the layout on your screen and not know how it appears on someone else's, and (for ex.) a 20px margin has more of an effect on a 768px or 960px fixed-width layout than it does on a 1280px-liquid computer screen.
The major con, IMO, to a fixed-width layout is the fact that it looks too small on larger screens and too big on smaller screens. 768px used to be a fairly standard fixed-width layout, but now that is too small as the world moves away from 800x600. Now 960px is fairly standard, which is too big for 800x600 but still too small on 1280x1024.
It all depends on your audience and how your site fits together. Some layout can be made liquid and work perfectly fine, while others must be fixed (like the one you described).
Why not use an <img> tag for your header image (masthead) instead of using a background image?
I would suggest not scaling your header graphic; most browsers are terrible at image scaling (nearest neighbor what?) and it won't look good for many people.
I'm for fluid/float/liquid layouts myself. I fact, most of my sites use a single column, so I don't have to worry about all the complexities "normal" site layouts have.
It is generally a bad idea to create a layout where text-columns expand to the browser with. Text becomes hard to read if the lines grow to long. I recommend settling on a fixed with for the text-column, perhaps around 50 letters wide.
发布评论
评论（5）
当浏览器调整大小时显示更多或更少的图像而不是缩放图像怎么样？ 虽然效果不完全相同，但这是用图像填充整个空间的简单方法。
为了举例说明，我们假设标头的背景图像在城市天际线照片之上包含某种徽标。 总体宽度为 1600 像素。 标志位于图像的左侧，而城市景观则延伸到最右侧。 我们假设您的标记大致如下所示：
我们可以将 #page 元素设置为 elastic width 并将背景图像应用到 #masthead 元素：
这里发生的情况是 #masthead 元素将扩展到 #page 元素的宽度，该宽度将介于 800px 和 1600px 之间（含），具体取决于宽度浏览器窗口是。 当#page 元素的宽度为 800 像素时，您只能看到天际线最左边的 800 像素； 当宽度为 1600 像素时，您可以看到整个天际线。 这样您的徽标始终可见，并且当调整浏览器大小时，会显示更多的城市景观。
这确实需要从一个更大的图像开始（至少与最大宽度一样宽，如果你有弹性的话），但结果是一个标头，无论它的尺寸是什么，都看起来不错——而不依赖于，斯特拉格提到了浏览器的图像大小调整算法。
What about revealing more or less of the image as the browser is resized, rather than scaling the image? It's not quite the same effect, but it's an easy way to fill an entire space with an image.
Let's assume, for the sake of the example, that your masthead's background image contains a logo of some sort on top of, say, a photograph of a city skyline. This is, overall, 1600px wide. The logo sits to the left of the image while the cityscape extends far right. And we'll assume your markup looks roughly like this:
We can set the #page element to an elastic width and apply a background image to the #masthead element:
What happens here is that the #masthead element will expand to the width of the #page element, which will be somewhere between 800px and 1600px wide (inclusive) depending on how wide the browser window is. When the #page element is 800px wide, you see only the left-most 800px of the skyline; when it's 1600px wide, you see the entire skyline. That way your logo is always visible and when the browser is resized, more of the cityscape is revealed.
This does require having a larger image to start with (at least as wide as your max-width, if you go elastic), but the result is a masthead that will look good no matter what size it is--without relying on, as strager mentioned, browsers' image resizing algorithms.
这是一个什么样的形象呢？ 它的任何部分是可重复的吗？ 有时使用两层，一层用于图像的重复元素，另一层用于固定元素。
我们可以看一个例子吗？ 为您的问题找到正确的答案会更容易。
What kind of image is it? Is any part of it repeatable? Sometimes using two layers, one or the tag for a repeating element of the image and another for the fixed element.
Can we see an example? It would be easier to get to the right answer for your problem.
如果您尝试将背景图像扩展到页面的宽度，最好使用固定大小的布局，因为没有跨浏览器的方法可以使背景图像扩展到取决于页面宽度的不同尺寸。访客分辨率。
固定宽度布局为设计者提供了更大的灵活性，但不为访问者提供更大的灵活性。 如果您创建 X 像素宽的布局，那么您可以根据自己的喜好逐像素微调您的网站，而“浮动”布局（我称之为液体布局）完全基于百分比值，因此有所不同从计算机到计算机。 我发现这很困难，因为您可以在屏幕上测试布局，但不知道它在其他人的屏幕上显示如何，并且（例如）20px 边距对 768px 或 960px 固定宽度布局的影响比对1280px 液体电脑屏幕。
在我看来，固定宽度布局的主要缺点是它在大屏幕上看起来太小，在小屏幕上看起来太大。 768px 曾经是相当标准的固定宽度布局，但现在随着世界逐渐远离 800x600，它太小了。 现在 960px 是相当标准的，对于 800x600 来说太大了，但对于 1280x1024 来说仍然太小。
这完全取决于您的受众以及您的网站如何组合在一起。 有些布局可以是流动的并且工作得很好，而其他布局则必须是固定的（就像您所描述的那样）。
If you are trying to expand your background-image to the width of your page, it is better to use a fixed-sized layout as there is no cross-browser method to making a background-image expand to varying sizes that are dependent on the visitors resolution.
Fixed width layouts provide more flexibility for the designer, but not for the visitor. If you create a layout that is X pixels wide, then you are able to fine-tune your website pixel-by-pixel to your liking whereas "float" layouts (I call them liquid layouts) are based entirely on percent values and therefore differ from computer-to-computer. I find this difficult because you can test the layout on your screen and not know how it appears on someone else's, and (for ex.) a 20px margin has more of an effect on a 768px or 960px fixed-width layout than it does on a 1280px-liquid computer screen.
The major con, IMO, to a fixed-width layout is the fact that it looks too small on larger screens and too big on smaller screens. 768px used to be a fairly standard fixed-width layout, but now that is too small as the world moves away from 800x600. Now 960px is fairly standard, which is too big for 800x600 but still too small on 1280x1024.
It all depends on your audience and how your site fits together. Some layout can be made liquid and work perfectly fine, while others must be fixed (like the one you described).
为什么不使用![]()
标签作为标题图像（标头）而不是使用背景图像？
我建议不要缩放标题图形； 大多数浏览器在图像缩放方面都很糟糕（最近的邻居是什么？）并且对于很多人来说它看起来不太好。
我自己喜欢流体/浮动/液体布局。 事实上，我的大多数网站都使用单列，因此我不必担心“正常”网站布局所具有的所有复杂性。
Why not use an <img> tag for your header image (masthead) instead of using a background image?
I would suggest not scaling your header graphic; most browsers are terrible at image scaling (nearest neighbor what?) and it won't look good for many people.
I'm for fluid/float/liquid layouts myself. I fact, most of my sites use a single column, so I don't have to worry about all the complexities "normal" site layouts have.
创建文本列扩展到浏览器的布局通常是一个坏主意。 如果行太长，文本将变得难以阅读。 我建议为文本列选择固定宽度，宽度大约为 50 个字母。
It is generally a bad idea to create a layout where text-columns expand to the browser with. Text becomes hard to read if the lines grow to long. I recommend settling on a fixed with for the text-column, perhaps around 50 letters wide.