Question

当我重新调整网络浏览器的大小时，我的文字正在移开我的图像。我一直在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;

}

Answer 1

我不确定你的意思，但这就是我所做的。如果你正在寻找不同的东西，请跟我说。

添加top: 50px;并将宽度设置为<h2>文字的100％。

这里是小提琴https://jsfiddle.net/King_Code/hL6b4qxh/1/

div h2{
  width:100%;
  max-width: 1000px;
  position: absolute;
  text-align: center;
  float: right; 
  color: white;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 55px;
  line-height: 150%;
  top: 50px;
}

希望这有帮助。

Answer 2

使用font-size：100％或font-size：6em。单词中断/换行也会对你有所帮助。

编辑：分词：破词; - 在分隔线+宽度：100％; ＆lt; - 不确定宽度是否重要。

编辑＃2：编辑＃2：看起来你真正想要的是添加style =“width：100％;”到图像，然后在你的CSS播放中使用这些设置

  font-size: 5rem;
  top:0px !important;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
  padding-left:20%;
  padding-right:20%;
  padding-top:5%;

Answer 3

您还可以将文字转换为图像，以便在背景旁边进行响应，或者将文字添加到背景图像中：）

Answer 4

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

<强> Demo

＆＃13;

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

＆＃13;

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

＆＃13;

当我重新调整网络浏览器的尺寸时，我的文字正在移开我的图像？

4 个答案: