可调整图片大小的文字div

Question

我想知道是否有任何方法可以在图像上的div内放置文本，我知道可以使用z-index，但是我需要文本随着图像的大小变小。 谢谢你所做的一切，我想用图像来调整文本框的大小

Answer 1

首先，您需要设置meta标签：

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

然后为图片（％）和文字（em）使用相对值。

希望能帮助到你。

Answer 2

这是使用视口单位vw一种方法

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

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