3

我的问题围绕着 CSS 固定布局与扩展以填充浏览器宽度的浮动布局。

现在我遇到的问题是根据页面的宽度调整标头广告的大小（鉴于当前浏览器的CSS3 实现，我理解这是不可能的background-image: size;）。在这一点上，我觉得我已经陷入了僵局：我是要重新设计网站以使用固定的 CSS 布局，还是保持当前布局并尝试使标头图像扩展以填充提供的大部分空间? 此外，转向固定宽度布局的利弊是什么，以及使用一种布局而不是另一种布局的其他（看不见的）后果？

有问题的网站将作为对此问题的评论给出——我不想被视为试图增加它的流量。

编辑：还有其他想法吗？

4

5 回答 5

7

当浏览器调整大小而不是缩放图像时，如何显示更多或更少的图像？这不是完全相同的效果，但它是一种用图像填充整个空间的简单方法。

让我们假设，为了示例，您的标头广告的背景图像包含某种标志，例如，城市天际线的照片。总体而言，这是 1600 像素宽。标志位于图像的左侧，而城市景观则延伸到最右侧。我们假设您的标记大致如下所示：

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

我们可以将#page 元素设置为弹性宽度并将背景图像应用到#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 提到，浏览器的图像大小调整算法。

于 2008-12-02T11:01:04.943 回答
2

它是什么样的形象？它的任何部分是可重复的吗？有时使用两层，一层或标签用于图像的重复元素，另一层用于固定元素。

我们可以看一个例子吗？为您的问题找到正确的答案会更容易。

于 2008-12-02T10:17:21.680 回答
1

如果您尝试将背景图像扩展到页面的宽度，最好使用固定大小的布局，因为没有跨浏览器的方法可以使背景图像扩展到不同的大小，这取决于访客分辨率。

固定宽度布局为设计者提供了更大的灵活性，但对访问者却没有。如果您创建一个 X 像素宽的布局，那么您可以根据自己的喜好逐个像素地微调您的网站，而“浮动”布局（我称之为液体布局）完全基于百分比值，因此会有所不同从计算机到计算机。我觉得这很困难，因为您可以在屏幕上测试布局，但不知道它在其他人的屏幕上是如何显示的，而且（例如）20 像素的边距对 768 像素或 960 像素的固定宽度布局的影响比它在一个 1280 像素的液体电脑屏幕。

IMO 对固定宽度布局的主要缺点是它在大屏幕上看起来太小而在小屏幕上看起来太大。768px 曾经是一个相当标准的固定宽度布局，但现在它太小了，因为世界远离了 800x600。现在 960px 是相当标准的，对于 800x600 来说太大了，但在 1280x1024 上仍然太小了。

这完全取决于您的受众以及您的网站如何组合在一起。一些布局可以变成流动的并且工作得很好，而另一些则必须固定（就像你描述的那样）。

于 2008-12-01T03:39:43.230 回答
1

为什么不为您的标题图片（标头）使用<img>标签，而不是使用背景图片？

我建议不要缩放标题图形；大多数浏览器在图像缩放方面都很糟糕（最近的邻居是什么？）而且对很多人来说看起来并不好。

我自己喜欢流体/浮动/液体布局。事实上，我的大多数网站都使用单列，所以我不必担心“正常”网站布局所具有的所有复杂性。

于 2008-12-01T03:52:15.170 回答
1

创建一个文本列扩展到浏览器的布局通常是一个坏主意。如果线条变长，文本会变得难以阅读。我建议为 text-column 设置一个固定的 with，大概 50 个字母宽。

于 2008-12-02T18:03:45.310 回答