Html 图像和动态布局

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

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

问题是，这并没有真正优雅地伸展。当文本大小增加时，高度和宽度会改变，但**图像的大小不会增加；它只是重复**

---

我怎样才能让我的图像拉伸和挤压，而不是重复或被切断？（如果可能的话，我想要一个基于css的解决方案……我已经有了一些html想法）。

我找到的唯一方法是：

• 将#标题的背景设置为标题图像的背景颜色
• 将新div放置在#标题内
• 将标题图像拆分为2
• 将新图像的左半部分设置为#标题背景左对齐
• 将新图像的右半部分设置为#header.div background aligned right

---

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

我很确定您无法更改背景图像的缩放比例。如果header.png文件包含为

img

标记，则可以将其高度和宽度设置为若干个

ems

，浏览器将调整其大小（通常使其看起来像垃圾）

---

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

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

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

附录：该职位的格式如下：

---

xpo和ypo可以以常规方式给出（em、px、%等…）

@Pianosaurus，我认为你的想法可能是最简单的，尽管有限。简单地说，不要拉伸图像，但确保它在未拉伸时看起来不错（居中，不要让它重复）。此外，如果在页眉图像的边缘使用了大量的填充，向下调整页面大小也不会导致如此大的问题。

我想知道拉伸背景图像的javascript….？对于向下调整的问题，您还可以设置最小宽度：XXpx；和最小高度：YYpx到背景图像的像素大小，如果你不希望元素变小的话。查看并了解一些最新的框架，以及它们如何与动态布局一起工作等。