如何讓這個圖像響應頁面大小而不移動文本

因此，我的網頁在桌面上看起來很好，但是當我通過任何其他設備（手機，平板電腦）查看頁面上的文本時向下移動到其他內容。有沒有一種方法可以讓文字縮小，就像圖像一樣？如何讓這個圖像響應頁面大小而不移動文本

這裏是我的HTML：

<div class="hero"> 
     <img src="resources/assets/home_header.png" alt="youth futures header"/> 
      <div class="text"> 
       <h1>Hi</h1> 
       <p class="textstyle2">14 WARM BEDS. YOUTH 12-17.<br/>YOUR TEMPORARY HOME:)</p> 
      </div> 
    </div>

這裏是CSS：

.hero { 
width:1280px; 
    margin:0rem auto; 
    position: relative; 
} 

.text { 
position: absolute; 
top:50%; 
left:0; 
padding:1rem; 
transform:translateY(-50%); 
text-align:center !important; 
margin: 0px 197px 103px 531px; 
}

來源

2017-03-08 smithky3