HTML5 Bootstrap - 将文本保留在图像中的 div 中

Question

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

.CSS

.tag {
    float: left;
    position: absolute;
    left: 0px;
    top: 50px;
    z-index: 1000;
    width:100%;
    height:500px;
    max-width:100%;
    text-align:center;
    padding: 5px;
    color: #FFFFFF;
    font-weight: bold;
    text-shadow: 2px 2px #222222;
    font-size:75px;
}

当我将页面大小调整为移动大小时，图像顶部的文本也不会调整大小，而是覆盖网页的其余部分。

示例：JSFIDDLE

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

Answer 1

你甚至没有针对img，你应该使用，

img { width: 100% }

并将文本放在 p 标签或 h3 标签内，

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

Answer 2

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

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

希望对您有所帮助。