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

【问题标题】：Show background image if container content is small (responsive)如果容器内容很小（响应式），则显示背景图像
【发布时间】：2012-11-03 06:22:52
【问题描述】：

我正在开发一个使用画笔笔触作为按钮背景的响应式网站（使用 Foundation 3）。我很难做到 1）让图像与响应式设计的其余部分一起缩放 2）无论容器 div 有多大，都可以显示全尺寸背景图像。

几个屏幕截图：

当浏览器全宽时- 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）保持响应的更好方法是什么？

【问题讨论】：

【解决方案1】：

为了使背景适合它所属的容器，请将background-size 设置为cover

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

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

【讨论】：