css - 如果容器内容很小（响应式），则显示背景图像

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

当您调整容器元素的大小时，图像将调整大小，因此使用宽度/高度的百分比值或使用媒体查询使容器元素具有响应性。使用 min-width 和 max-width 来防止元素变得太小或太宽。