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

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）即使内容很小而且保持响应，也能显示完整尺寸？

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

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