图片和动态布局

Question

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

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

的问题是，这并没有真正舒展优雅。当文字大小增加时，高度和宽度会发生变化，但**图像的大小不会增加;它简单地重复*。*

我怎样才能使我的形象伸展和挤压，而不是重复或截断？（如果可能，我想要一个基于css的解决方案......我已经在商店中获得了一些html创意）。

Answer 1

没有办法使用CSS来渲染背景图像。你将不得不使用JavaScript或类似的东西。但是，如果你有没有需要重复（如融入背景中）的图像，你可以做这样的事情：

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

附录：位置具有以下格式：<顶部|中心| pos | xpos > < left | center | right | ypos > 其中xpos和ypos可以以常规方式给出（em，px，％等等）。

Answer 2

我曾经发现的唯一的方法是：

• 的#header的设置背景，标题图片的bgcolor。
• 将新的div内的#header
• 拆分标题图片为2
• 集新形象的左半边为对齐左的#header背景
• 设置新的图像的右半部分为＃header.div背景aligned- right

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

Answer 3

我很确定你不能改变背景图像的缩放比例。如果您的header.png文件包含在img标记中，那么您可以将它的高度和宽度设置为ems，浏览器将调整其大小（通常使其看起来像废话）。

请记住，几乎所有的现代浏览器都做页面缩放，这将扩展一切，而不会改变你的布局太多。也许告诉你的用户使用该功能？

Answer 4

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