相对于页面宽度缩放 CSS 背景图像

Question

我正在尝试制作一个响应式网页，我想在其中显示一些带有悬停图像的按钮图像。这些按钮是 100x100 像素，但是，一旦网页低于某个宽度（即在移动设备上），我希望它们缩小到较小的百分比。我目前有以下 CSS 来显示它们：

.tumblr {
    margin-bottom: 10px;
    width: 100px;
    height:100px;
    display:block;
    background:transparent url('http://i.imgur.com/BNYulhj.jpg?1') center top no-repeat;
}

.tumblr:hover {
   background-image: url('http://i.imgur.com/BNYulhj.jpg?1');
}

我对我正在尝试做的事情做了一个 jsfiddle here。每行将有 3 个按钮，因此在每个 100x100 像素时，我希望它们在可用区域宽度小于 300~px 时开始整体缩小（边距要多一点）。我已经尝试以多种方式定义 background-size，但它似乎并没有达到我想要的效果。

任何帮助将不胜感激！

Answer 1

部分答案：

您描述的行为可以使用width 和max-width 的组合来实现（另请参阅此问题：CSS width 100% OR max-width in pixels）：

.connect li {
    width: 32%;
    max-width: 100px;
}

http://jsfiddle.net/pvcp7Lok/2/

部分答案是因为：当您使用带有背景的 <a> 而不是 <img> 时，让高度与宽度相对应有点棘手（请参阅 this article），所以在小提琴中我刚刚为图像设置了一个固定的100px 高度。在任何情况下，将background-size 设置为一个百分比，以确保背景按照<a>s 的大小进行缩放。