如果容器內容很小（響應），則顯示背景圖片

Question

我正在使用畫筆筆觸作爲按鈕背景的響應式網站（使用Foundation 3）。我很難與1）讓圖像與其他響應式設計相匹配2）使全尺寸背景圖像顯示無論容器div有多大。

一對夫婦的屏幕截圖：

當瀏覽器是全寬度 - http://www.screencast.com/t/3Lu86fhnsZkk（我是一個新的用戶不能張貼圖片）

當瀏覽器的寬度 - http://www.screencast.com/t/3Lu86fhnsZkk

秤

CSS：

h4.reserve{ 
background: url(../images/reserve_spot_bkg.png) no-repeat; 
width: 290px; 
height: 63px; 
padding-top: 20px; 
margin: 0 0 0 -10px;} 

有什麼更好的辦法有背景1）即使內容很小也顯示全尺寸的圖像2）保持響應？

Answer 1

爲了使背景適合於容器它屬於，設置background-size到cover

h4.reserve { 
background: url(../images/reserve_spot_bkg.png) no-repeat; 
background-size: cover; 
width: 60%; 
min-width: 100px; 
} 

http://www.w3schools.com/cssref/css3_pr_background-size.asp

，而你調整容器元素，所以使容器元素響應圖像將調整使用寬度/高度的百分比值或使用媒體查詢。 使用最小寬度和最大寬度可防止元素變得太小或變寬。