CSS絶対位置のない画像上のテキスト（幅100％）

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;を使用してみましたし、明らかにそれはテキストだけで画像が拡大した場合でも、同じ場所にとどまるように動作しません。 。

ありがとうございました！

更新：だから基本的に私は私のウェブサイトのjpg（ロボットや言葉）と数字との

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

にこのセクションを持っています。私は窓を大きくすると、JPGが拡大しますが、数字は（大きさや位置の点で）同じまま

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

私の目標は、全体のセクションは、第一の画像と全く同じに見えるようにすることです私はどのようにウィンドウを拡大しても問題ありません。

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

Answer 2

あなたはposition: absolute;と非常に近いです。あなたができるベストは、テキスト（.projects）をパーセントで表示することです。それは固定ピクセル位置に固定されていないのです。

は、見てください：あなたは画面が本当に小さくするときhttps://jsfiddle.net/v1u01md3/1/

それは例えば、絶対確実ではありません。しかし、これはいくつかのメディアクエリで修正される可能性があります。

Answer 3

テキスト位置/サイズを調整するためにメディアクエリを使用してみましたか？ここで

は良い概要です：https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 4

あなたが代わりにimgをbackground-imageを使用して、このよう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 5

アイデアposition absoluteを持つすべての要素に相対的な相対位置を持つ要素の内部に含める必要があります。

ここにコードを修正した実例があります。ここでは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; 
    }