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填充整个视口，则必须先设置

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

Answer 2

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

缩放CSS中的文本和图像

2 个答案: