Jquery HTML5引导-将文本保存在图像中的div中

HTML

<div class="tag">TEXT<br> <a href="#bottom"class="icons glyphicon glyphicon-circle-arrow-down"></a></div>
<img src="images/flower.jpg" class ="img-responsive" style="margin:0px; padding:0px;">

当我将页面大小调整为手机大小时，图像顶部的文本不会调整大小，而是覆盖了页面的其余部分

例如：

---

^当您将窗口拖得更小时，文本与正文重叠。

您甚至没有瞄准img，您应该使用

img { width: 100% }

并将文本放入p标签或h3标签内

h3 { font-size: 1em} // or 1rem

---

您可以使用媒体查询在较小的屏幕上更改字体大小

@media only screen and (min-width: 768px) {
  .tag {
     font-size: 20px;
   }
}

希望能有帮助

@media only screen and (min-width: 768px) {
  .tag {
     font-size: 20px;
   }
}