html - 没有绝对位置的图像上的 CSS 文本(宽度 100%)

Question

我有一个宽度为 100% 的图像，因此它会随着窗口的大小而放大。我怎样才能在上面放置文本，以便它们以与图像相同的比例放大？

HTML:

<div class=instructables>
<h1>
I N S T R U C T A B L E S
</h1>
<img src="http://i.imgur.com/QvCRbHp.jpg" width="100%"/>
<div class=projects>
9    
</div>
</div>

CSS:

.instructables {
margin-top: 150px;
margin-bottom: 200px;
margin-left: 150px;
margin-right: 150px;
letter-spacing: 2px;
line-height: 2;
font-size: 15px;
position: relative;
}

.projects{
 position: absolute;
 top: 140px;
 left: 285px;
 font-size: 350%;
 font-family: Georgia, Serif;
 color: #424242;
}

我尝试使用 position: absolute; 显然它不起作用，因为即使图像被放大，文本也只是停留在同一个位置。

谢谢你!

更新:所以基本上我的网站上有这个部分

http://i.imgur.com/q5kaxMM.png

带有 jpg(机器人和文字)和数字。当我放大窗口时，jpg 放大了，但数字保持不变(在大小和位置方面)

http://i.imgur.com/4nhdnl2.png

我的目标是使整个部分看起来与第一个图像完全一样，无论我如何放大窗口。

Answer 1

这里绝对需要一些媒体查询。我建议从一些基本样式开始，然后根据需要添加。这些可以帮助您入门，您可以根据需要添加任意数量并根据需要进行调整。

@media screen and (max-width: 480px) {
.projects {font-size: 15px;}
}

@media screen and (min-width: 800px) {
.projects {font-size: 25px;}
}

@media screen and (min-width: 1200px) {
.projects {font-size: 40px;}
}