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

你与position: absolute;非常接近。我认为你能做的最好的事情是将文本（.projects）定位为百分比。这种方式并没有锁定在固定的像素位置。

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

它并非万无一失，例如当你使屏幕非常小时。但这可以通过一些媒体查询来解决。

Answer 2

您是否尝试使用媒体查询来调整文字位置/尺寸？

以下是一个很好的概述：Windocks

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％），没有绝对位置

5 个答案: