图像和动态布局

Question

我正在使用基于em的布局的网站（因此，当用户增加或减少字体大小时，它可以优雅地拉伸和压缩）。此站点有一个标题，应在所有页面上显示。我在所有页面都有一个“标题”div，站点范围的css文件包含代码：

#header
{
    width: 50em;
    height: 6em;
    margin-bottom: .5em;
    background: url("/IMAGES/header.png");
}

问题在于，这并没有真正优雅地延伸。当文字大小增加时，高度和宽度会发生变化，但**图像的大小不会增加;它只是重复*。*

如何让我的图像伸展和挤压，而不是重复或被切断？（如果可能的话，我想要一个基于CSS的解决方案......我有一些html的想法在店里，已经）。

Answer 1

我找到的唯一方法是：

• 将#header的背景设置为标题图像的bgcolor。
• 将新div放在#header
中
• 将标题图像拆分为2
• 将新图像的左半部分设置为#header background aligned-left
• 将新图像的右半部分设置为＃header.div background aligned-right

当然，这只适用于合适的图像。

Answer 2

我很确定你无法改变背景图像的缩放比例。如果你的header.png文件被包含为img标记，那么你可以将它的高度和宽度设置为ems的数量，浏览器会调整它的大小（通常使它看起来像垃圾）

请记住，现在几乎所有现代浏览器都会进行页面缩放，这样可以在不改变布局的情况下扩展所有内容。也许告诉用户使用该功能？

Answer 3

无法使用css拉伸背景图像。你必须使用javascript或类似的东西。但是，如果您的图像不需要重复（例如混合到背景中），您可以执行以下操作：

background-position: center center;
background-repeat: no-repeat;

附录：该职位的格式如下：＆lt; top | center | bottom | xpos＆gt; ＆LT;左|中心|右| ypos＆GT; 其中xpos和ypos可以以常规方式给出（em，px，％等等）。

Answer 4

@Pianosaurus，我认为你的想法可能是最简单的，虽然有限。简单地说，不要拉伸图像，但要确保它在未拉伸时看起来很好（中心，不要让它重复）。此外，如果在标题图像的边缘使用相当数量的填充，则调整页面大小也不会导致如此大的问题。