图像和动态布局

Question

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

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

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

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

Answer 1

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

Answer 2

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

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

附录：位置格式如下： 其中 xpos 和 ypos 可以以常规方式（em、px、% 等）给出。

Answer 3

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

请记住，如今几乎所有现代浏览器都进行页面缩放，这将在不过多更改布局的情况下放大所有内容。也许告诉您的用户使用该功能？

Answer 4

我找到的唯一方法是：

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

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