如何將背景圖片拉伸至全寬並防止文字溢出

Question

我爲div使用了背景圖片，並使用了background-size:100%以使其成爲完整寬度。但如果我使用此選項，則內部內容不會似乎在瀏覽器調整大小時仍保留在div內。但是，如果我刪除「背景大小：100％」，那麼它會保持在內。那麼，如何將圖像拉伸到瀏覽器的全部以及內容以保持在div內？

我的HTML

<div class="small-12 medium-12 large-12 columns middle_1" style="background-image: url('images/kitchen_adventurer_lemon.jpg');background-repeat:no-repeat;background-size:100%;"> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
     </div> 

Answer 1

您是否嘗試過設置你的背景，以 '蓋'？

div { 
    background: url(example.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

Answer 2

它不溢出。您的背景不會重複，因此它會耗盡背景。

如果你的目的是使文字圖像的大小相匹配，就可以完成，像這樣：

HTML：

<div class="main"> 
    <img src="images/kitchen_adventurer_lemon.jpg" style="width:100%;"/> 
    <div class="text"> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
       bcjfdbcjdb<br/> 
    </div> 
</div> 

CSS：

.main{ 
    position: relative; 
    overflow: hidden; 
} 

.text{ 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
}