ブラウザのサイズを変更するときにテキストが画像から離れないようにするにはどうすればよいですか？

Question

私はブラウザのサイズを変更すると画像の中にテキストを保持しようとしています。私もそれを浮かべてみました。

<div class="image"> 
<img src="background2.jpg"> 
<h1>Hello</h1> 
</div> 

そして、ここであなたはそれがh1は絶対に対して配置されるものだようにposition: relativeする親要素（.imageを）したいCSS

.image img{ 
    width: 90%; 
    display: block; 
    margin: auto; 
    position: relative; 
} 
h1{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
} 

Answer 1

です。また、ページの90％に中央となる幅とマージンを与えることもできます。親の画像を100％幅にして、top: 50%; left: 50%; transform: translate(-50%,-50%);を使用して、テキストを垂直方向と水平方向の中心に完全に合わせます。

.image { 
 
    width: 90%; 
 
    display: block; 
 
    margin: auto; 
 
    position: relative; 
 
} 
 

 
.image img { 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
.stuff { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    margin: 0; 
 
}

<div class="image"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <div class="stuff"> 
 
    <h1>Hello</h1> 
 
    <h2>Foobar</h2> 
 
    </div> 
 
</div>

Answer 2

あなたは画像に親のdivの背景を作ってみることができます。

<div class="image"> 
    <h1>Hello</h1> 
</div> 

CSSはこのようなものになります。

.image { 
    background: url('background2.jpg') no-repeat center center; 
    background-size: cover; 
}