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

Question

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

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（机器人和文字）和数字。当我放大 window 时，jpg 放大了，但数字保持不变（在大小和位置方面）

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

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

Answer 1

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

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

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

Answer 2

您是否尝试过使用媒体查询来调整您的文本position/size？

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

Answer 3

您可以使用 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

Answer 4

实现该功能的想法是，您必须在具有相对位置的元素中包含所有具有绝对位置的元素。

这是修改代码的工作示例。 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;
    }

Answer 5

这里绝对需要一些媒体查询。我建议从一些基本样式开始，然后根据需要添加。这些可以让你入门，你可以随意添加和调整。

@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;}
}

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

CSS Text over image (width 100%) without absolute position

html

css

image

text

positioning