html - 图像和动态布局

Question

我在一个基于 em 布局的网站上工作(因此它可以在用户增大或减小字体大小时优雅地拉伸(stretch)和压缩)。该网站有一个标题，应该显示在所有页面上。我在所有页面中都有一个“标题”div，并且站点范围的 css 文件包含代码:

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

问题是这并没有真正优雅地拉伸(stretch)。当文字变大时，高和宽会变，但**图片不会变大；它只是重复*.*

如何让我的图像拉伸(stretch)和挤压，而不是重复或被截断？(如果可能的话，我想要一个基于 css 的解决方案...我有一些 html 的想法已经在店里了)。

Answer 1

无法使用 css 来拉伸(stretch)背景图像。您将不得不使用 javascript 或类似的东西。但是，如果您有不需要重复的图像(例如混合到背景中)，您可以这样做:

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

附录:位置格式如下: 其中 xpos 和 ypos 可以以常规方式给出(em、px、% 等...)。