没有绝对位置的图像上的 CSS 文本（宽度 100%）答案

【问题标题】：CSS Text over image (width 100%) without absolute position没有绝对位置的图像上的 CSS 文本（宽度 100%）
【发布时间】：2016-07-24 22:24:44
【问题描述】：

我有一个宽度为 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

我的目标是让整个部分看起来与第一张图片完全相同，无论我如何放大窗口。

【问题讨论】：

“使它们以与图像相同的比例放大”是什么意思？文本没有任何像素大小，因此它不是“放大”，而是使用其字体大小计算其大小。或者您的意思是您希望文本适合宽度，例如图像宽度 = 100% 可以吗？
我还是没明白，你能告诉我们猜到的结果是什么吗？
我已经发布了更新。希望它更清楚。

标签： html css image text positioning

【解决方案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;}
}

【讨论】：

【解决方案2】：

您与position: absolute; 关系密切。我认为你能做的最好的就是用百分比定位文本（.projects）。这样它就不会锁定在固定的像素位置。

看看：https://jsfiddle.net/v1u01md3/1/

这不是万无一失的，例如当你把屏幕做得很小的时候。但这可以通过一些媒体查询来解决。

【讨论】：

这很接近，但我希望字体大小也可以放大。
在这种情况下，您应该查看 CSS 媒体查询

【解决方案3】：

您是否尝试过使用媒体查询来调整您的文本位置/大小？

这里有一个很好的概述：https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

【讨论】：

【解决方案4】：

您可以使用background-image 代替img 并在没有position: absoulte 的情况下添加文本，如下所示：

#wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    background: url('path/to/img') no-repeat top;
    background-size: cover;
    text-align: center;
}

jsFiddle

【讨论】：

【解决方案5】：

使这项工作发挥作用的想法是，您必须在具有相对位置的元素内包含所有具有绝对位置的元素。

这是一个修改代码的工作示例。此处为 HTML：

<div class="instructables">
<div class="projects">
<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%"/>
<span>9</span>    
</div>
</div>

还有这里的 CSS：

.instructables {
letter-spacing: 2px;
line-height: 2;
font-size: 15px;
position: relative;
}

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

    h1
    {
      position: absolute;
    }

    span
    {
      position: absolute;
    }

【讨论】：