javascript - 如何使文本跟随图像调整大小

Question

我在制作要求我的布局时遇到问题。

我有一张需要调整大小的图片，我需要使它上面的文本跟随图片调整大小。

例如:

一个女人的脸左边有一个词，当我调整窗口大小时图像改变了，但文本仍然是静态的..在同一个地方。

为了说明我的问题，我创建了一个代码笔:http://codepen.io/anon/pen/MwoJNb?editors=110

在第一个'英雄'中，图片有文字和线条，当你调整大小时，你可以看到文字跟在线条后面。

在第二个'英雄'中，图像只有线，文本是HTML，当你调整线的大小时移动，但文本保持在同一个地方

我想让相同的行为在第二个发生，但可以使用文本吗？

谢谢! :)

<div class="hero"></div>
<div class="hero2">
  <h1 class="hero2__text">Text<h1>
</div>

* {
  padding: 0px;
  margin: 0px;
}
.hero {
  background-image: url('http://i.imgur.com/2ZxJ9UY.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 400px;
  display: block;
}
.hero {
  background-image: url('http://i.imgur.com/2ZxJ9UY.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 400px;
  display: block;
}
.hero2 {
  margin-top: 50px;
  background-image: url('http://i.imgur.com/aD6yIXf.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 400px;
  display: block;
}
.hero2__text {
  color: white;
  position: relative;
  top: 120px;
  left: 160px;
}

Answer 1

我想像这样的 fiddle :https://jsfiddle.net/1xqbk25v/结合http://fittextjs.com/可能适合你。

文字与图片垂直对齐的相关代码是这样的:

.hero2 {
    position: relative;
}
.hero2__text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0px;
}
.img {
    overflow: hidden;
    margin-left: 100px;
}