图像和动态布局

时间:2008-12-10 01:07:25

标签: html css elasticlayout

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

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

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

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

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我找到的唯一方法是:

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

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

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

附录:该职位的格式如下:< top | center | bottom | xpos> <左|中心|右| ypos> 其中xpos和ypos可以以常规方式给出(em,px,%等等)。

寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1