文本div可以调整图像大小

Question

我想知道是否有任何方法可以将文本放在图像中的div内，我知道可以使用z-index，但我需要文本随着图像的大小变小。感谢我想用图像重新调整文本框的大小

Answer 1

首先，您需要设置元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后使用图像的相对值（％）和文本（em）。

希望它有所帮助。

Answer 2

以下是一种方法，使用视口单元vw

＆＃13;

＆＃13;

div {
  position: relative;
  width: 30vw;
  height: 30vw;
}
div img {
  display: inline-block;
  width: 100%;
  height: 100%;
}
div span {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 6vw;
  color: red;
  font-weight: bold;
}

＆＃13;

<div>
  <img src="http://lorempixel.com/200/200/animals" alt="">
  <span>Hey there</span>
</div>

＆＃13;

＆＃13;

＆＃13;