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

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