Question

我在制作一个问我的布局时遇到了麻烦。

我有这个需要调整大小的图像，我需要让它上面的文字跟随图像调整大小。

例如：

在女性面部左侧有一个单词，当我调整窗口大小时图像会发生变化，但文本仍然是静态的...在同一个地方。

为了说明我的问题，我创建了一个codepen：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

我认为像这个小提琴：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;
}

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

1 个答案: