響應式 - 圖像上的文字

Question

我在響應式設計中遇到問題。我嘗試在圖像中的框中顯示文本，但是當我調整瀏覽器文本的大小時，不在框中。

我的圖片：

.row6 { 
    background: none; 
    width: 100%; 
    height: 130px; 
    border: 0px salmon dotted; 
    font: bold 1.7vw arial, sans-serif; 
    margin: 20px auto; 
} 

.row6 > div { 
    position: relative; 
    top: 8px; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    background: url(images/background.png) no-repeat; 
    background-size: 100% 
} 

#dd7 { 
    margin-left:44.7%; 
    width:45px; 
    text-align:center; 
    padding-top:0.7% 
} 

HTML代碼：

<div class="row6"> 
    <div> 
    <div> 
     <div id="dd7">TEXT</div> 
    </div>    
    </div> 
</div> 

我應該怎麼做有文本始終在正確的位置上的形象？

Answer 1

試試這個fiddle

.row6 { 
    background: none; 
    width: 100%; 
    height: 130px; 
    border: 0px salmon dotted; 
    font: bold 1.7vw arial, sans-serif; 
    margin: 20px auto; 
} 

.row6 > .bgImage { 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    background: url(http://i.stack.imgur.com/amwBH.png) no-repeat; 
    background-size: 100% 
} 

#dd7 { 
    margin-left:44.7%; 
    margin-top: 1.2%; 
    float: left; 
} 

Answer 2

問題是您正在爲文本使用固定寬度（45px）。嘗試使用百分比寬度，而不是：

#dd7{ 
... 
width: 5%; 
} 

https://jsfiddle.net/pnzLn2no/1/