画像の上に文字を重ねてレスポンシブ対応しても崩れないようにしたいです

#分からない事
下記の画像のように画像の右上に文字を重ねています。]

しかしレスポンシブ対応するとズレてしまいます。
固定する方法などはありますでしょうか。
ご教授頂けないでしょうか。
何卒よろしくお願い致します。

erb
1<div class="introduction">
2  <img class="introduction-img" src="assets/photo1.jpg">
3  <h1>一生の思い出を。忘れられない旅を。</h1>
4</div>

scss
1.introduction {
2    position: relative;
3    .introduction-img {
4      height: 70%;
5      width: 70%;
6    }
7    h1 {
8      position: absolute;
9      top: 9%;
10      left: 17%;
11    }
12  }
13
14@media screen and (max-width: 559px) {
15
16}

行動規範の内容に同意します

回答1件

ベストアンサー

ずれてしまうのはどのように直したいでしょうか？
横幅が変わったときに改行するならこのような感じになります

html
1<div class="introduction">
2  <img class="introduction-img" src="assets/photo1.jpg">
3  <h1>一生の思い出を。</h1><br class="br_1><h1>忘れられない旅を。</h1>
4</div>
5

このように、brにclassを与えます
で、cssnを

css
1@media screen and (min-width: 1024px) {
2
3  .br_1{
4    display: none; 
5  }
6}
7
8/* 画面幅が560px以下の時は */
9@media screen and (max-width: 559px) {
10  .br_1{
11    display: block; 
12  }
13}