4

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

但我似乎无法弄清楚如何为将随图像缩放的覆盖文本编写代码。如果我使用我在这个论坛上找到的指南，它不会随着网络、移动设备等的屏幕流动。你能帮忙吗？

4

2 回答 2

1

如果要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 技巧以未知为中心 

#imagescale {
    text-align: center;
}

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

查看完整的 JSFiddle

于 2013-11-02T16:55:16.070 回答
0

为什么不将文本添加为​​ svg 图像并对其进行缩放？

于 2013-11-02T16:43:56.787 回答