在 CSS 中缩放文本和图像

我正在尝试缩放背景图像以适应任何屏幕，同时在图像上写入文本并进行缩放以适应屏幕尺寸。这是网站：www.beautebeaute.dk

我通过在这个论坛中搜索答案来准备背景图片。与此代码配合使用效果很好：

CSS

#imagescale {    
    width: 100%; 
    position: scroll; 
    left: 0px; 
    top: 0px; 
} 

.stretch {
    width:100%;
    height:100%;
}

HTML:

<div id="imagescale"><img src="http://beautebeaute.dk/wp-content/uploads/2013/11/Topbilledeny.jpg" class="stretch" alt="" / >

但我似乎无法弄清楚如何为随图像缩放的覆盖文本编写代码。如果我使用指南我在这个论坛中找到的 https://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css，它不会随着网络、移动设备等屏幕的流动而流动。你能帮忙吗？

如果你想要div填充整个视口，您必须首先设置

html, body {
    height: 100%;
}

然后你可以给

#imagescale {    
    width: 100%;
    height: 100%;
}

用图像填充它

#imagescale {
    background-image: url(http://lorempixel.com/1200/1000);
    background-repeat: no-repeat;
    background-position: center top;
}

现在，您可以将文本居中。 CSS 技巧中提供了一种解决方案以未知为中心 http://css-tricks.com/centering-in-the-unknown/

#imagescale {
    text-align: center;
}

#imagescale:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

查看完整内容JSFiddle http://jsfiddle.net/vx4aH/