HTML5引導 - 保持圖像內的一個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; 
    } 
} 

希望它有幫助。