html - 在 CSS 中缩放文本和图像

Question

我正在尝试缩放我的背景图像以适合任何屏幕，同时在图像上书写文本并使此缩放也适合屏幕尺寸。这是网站: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="" / >

但我似乎无法弄清楚如何为将随图像缩放的叠加文本编写代码。如果我使用指南that I found in this forum ，它不会随着网络、移动设备等的屏幕流动。你能帮忙吗？

Answer 1

如果你想让div填满整个viewport，你必须先设置

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 技巧 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