html - 调整网页浏览器大小时，文字从图像上移开了吗？

调整网页浏览器大小时，文字从图像上移开。我一直在Google上搜索答案，但尚未找到确定的答案。

这是我的小提琴https://jsfiddle.net/Mulk/tzupe2d5/10/#&togetherjs=Ek4Og9VFHK

这是我的代码：

<div class="container-fluid myclass">
<div class="row">
<div  class=" col-xs-12 col-sm-12 col-md-12 col-xl-12 ">
<img  class="img-responsive compimage" src="http://i1074.photobucket.com/albums/w407/Mulk_Abdulhadi/cop7_zpsqrstboer.jpg">

<div ><h2>Front-End Developer<p>ART/FUN/LIFE</p></h2></div>
</div>
</div>
</div>


CSS
.myclass{
  padding-left: 0px;
  padding-right: 0px;
}

.compimage {
     max-width: 100vw;
   margin-left: 0px;
  background-size: cover;
  position: relative;

}

div h2{
  position: absolute;
 text-align: center;

  color: white;
font-family: 'Lato', sans-serif;
font-weight: 300;
  font-size: 55px;

}

最佳答案

我解决了你的问题！这是how to make text responisve

Demo

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}
div {
  width: 100vw;
  height: 100vh;
  background-image: url("http://i.imgur.com/LhgOs1W.jpg");
}
div h1 {
  text-align: center;
  color: white;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 10vw;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  padding: 15%;
}

<div>
  <h1>Front-End Developer</h1>
</div>