html - 图像和动态布局

Question

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

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

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

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

score 0 · Accepted Answer

我发现的唯一方法是：

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

4 回答 4