CSS Text über Bild (Breite 100%) ohne absolute Position

Question

Ich habe ein Bild mit der Breite 100%, so dass es sich mit der Fenstergröße vergrößert. Wie kann ich Texte darüber legen, so dass sie sich im gleichen Verhältnis vergrößern wie das Bild?

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

Ich versuchte position: absolute; mit und offensichtlich funktioniert es nicht wie der Text an der gleichen Stelle bleibt nur selbst wenn das Bild vergrößert .

Vielen Dank!

Update: Also im Grunde habe ich diesen Abschnitt auf meiner Website

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

mit einem jpg (Roboter und Worten) und Zahlen. Wenn ich das Fenster vergrößern, das jpg vergrößert, aber bleiben die Zahlen gleich sind (in Bezug auf Größe und Position)

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

Mein Ziel der gesamte Abschnitt sieht genau das gleiche wie das erste Bild zu machen, egal wie ich das Fenster vergrößere.

Answer 1

Auf jeden Fall müssen einige Medien Abfrage Liebe hier. Ich würde vorschlagen, mit einigen grundlegenden Stilen zu beginnen und bei Bedarf hinzuzufügen.Diese können Sie starten, Sie können beliebig viele hinzufügen und anpassen, wie Sie möchten.

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

Answer 2

Sie waren ziemlich nah mit der position: absolute;. Ich denke, das Beste, was Sie tun können, ist den Text (.projects) mit Prozenten zu positionieren. So ist es nicht an einer festen Pixelposition gebunden.

Werfen Sie einen Blick: https://jsfiddle.net/v1u01md3/1/

Es ist nicht narrensicher ist, zum Beispiel, wenn Sie den Bildschirm wirklich klein zu machen. Aber das könnte mit einigen Medienabfragen behoben werden.

Answer 3

Haben Sie versucht, Medienabfragen zu verwenden, um Ihre Textposition/-größe anzupassen?

Hier ist eine gute Übersicht: https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 4

Sie background-image statt img und einen Text verwenden können über ohne position: absoulte so: zu machen

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

jsFiddle

Answer 5

Die Idee, dass Arbeit ist, dass Sie innerhalb eines Elements mit Position relativ alle Elemente mit absoluter Position einschließen müssen.

Hier ist ein Arbeitsbeispiel, das Ihren Code ändert. HTML hier:

<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> 

und die CSS hier:

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