Javascript 如何将文本放置在同样调整大小的图像上？

我想做一份工作 。将div float覆盖在“img/5.jpg”的顶部。但我想让图像 仍然调整大小并保持在顶部。以及顶部的横幅 保持不变。非常感谢。这个想法的一个例子可以在上找到。我宁愿只使用没有背景的文本，我把文本放在一个div（.overlay）中，因为这样看起来更容易处理

编辑：我认为我不够清晰，我不想有效地浮动。覆盖在#maincontent1内图像的顶部

@charset“utf-8”；
/*CSS文档*/
html，正文{
保证金：0；
填充：0；
溢出x：隐藏；
}
#包装纸{
高度：自动；
宽度：100%；
}
.覆盖{
宽度：53%；
填充：2%2%3%；
背景颜色：绿色；
背景重复：重复；
文本对齐：左对齐；
z指数：1；
}
#主要内容1 h1{
z指数：100；
位置：静态；
颜色：白色；
}
#主要内容1 img{
宽度：100%；
位置：静态；
排名：0；
左：0；
z指数：-1；
}
#主要内容2{
明确：两者皆有；
}
#主要内容3{
明确：两者皆有；
字体系列：“Raleway”，无衬线；
左缘：20%；
保证金权利：20%；
明确：两者皆有；
}
#主要内容4{
宽度：100%；
明确：两者皆有；
}
#主要内容5{
明确：两者皆有；
背景图像：url（../img/3.jpeg）；
垫面：10%；
垫底：10%；
}
.maincontent5_文本{
明确：两者皆有；
字体系列：“Raleway”，无衬线；
左缘：12%；
保证金权利：12%；
背景色：#FFF；
明确：两者皆有；
边框颜色：#FFF；
边框样式：实心；边框宽度：10px；
}
.maincontent5_文本h1{
显示：内联；
字体系列：“Raleway”，无衬线；字体大小：30px；
文本对齐：右对齐；
颜色：#F39C9C；
字体大小：400；
左侧填充：5px；
}
#顶栏{
页边距底部：0；
填充：3px0 3px0；
背景：#F39C9C；
宽度：100%；
文本对齐：右对齐；
颜色：白色；
} 
#顶栏ul{
列表样式：无；
保证金：0；
填充：0；
} 
#topbar ul li{
保证金：0；
填充：0；
显示：内联；
}

无标题文件


电子邮件
电话

这里有一些文字
.menu1 p{
文本对齐：居中；
字体系列：“Comfortaa”，草书；
字体大小：20px；
}
家

关于

投资组合

接触


“他们非常善于回应反馈，工作非常努力。”
整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。阿利奎姆·勒姆·安特、达比布斯·安特、维韦拉·奎斯、费吉亚·阿泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世

“他们非常善于回应反馈，工作非常努力。”
整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。阿利奎姆·勒姆·安特、达比布斯·安特、维韦拉·奎斯、费吉亚·阿泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世

您可以使用视口单位值设置文本的字体大小

以下是（调整窗口大小以查看文本大小）

---

您将

#maincontent1

设置为

位置：相对并将
.overlay
设置为
位置：绝对
然后您可以使用
顶部
或
底部
、
右侧
或
左侧
值定位覆盖。使用媒体查询和字体大小百分比

摆弄（调整窗口大小以使其生效）


CSS

HTML


“他们非常善于回应反馈，工作非常努力。”
您的html无效：这真的是复制问题所需的最小代码量吗。我不想太苛刻，但你的HTML是：a）无效，b）混乱和过时，例如
color
和
bgColor
等属性被贬低。请提供复制问题的最低代码量。处理损坏的图像也很困难。使用Instedi之类的工具也相信你最好在容器上使用背景图像，因为这正是它的本来面目。你能举个例子说明这是如何工作的吗？我没能让它打球。
<img src="http://lorempixel.com/g/400/200" alt="" />
<div class="text">Some text</div>

img {
  width: 50%;
  height: 50%;
}
.text {
  font-size: 4vw; /* 4% of the viewport width */
}

body{
    font-family: 'Raleway', sans-serif; 
    font-size: 36px; 
    font-weight:400;  
    height:100%;
    width:100%;
    margin:0 auto;
    }

    .resize{ 
    text-align:center; 
    color:#F39C9C; 
    font-size:100%;
    width:100%;

    }

    @media screen and (max-width: 680px){
    .resize{
    font-size: 50%;
        }
    }

<h2 class="resize" > 
"They were extremely good at responding to feedback and worked incredibly hard."
</h2>