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

我正在尝试制作一个有响应性的网页，其中我想显示一些按钮图像，并将鼠标悬停在图像上。这些按钮是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');
}

我把我要做的事弄混了。每行将有3个按钮，因此在每行100x100px时，只要可用区域宽度为部分答案，我希望它们开始整体缩小：

您描述的行为可以使用

width

和

max width

的组合来实现（另请参见此问题：）：

---

部分回答是因为：当您使用

）时，所以在小提琴中，我刚刚为图像设置了一个固定的
100px
高度。在任何情况下，将背景大小设置为一定的百分比，以确保背景大小与背景大小一致
 我知道
背景尺寸：封面我不知道它的支持程度如何。看起来像IE 9。我尝试添加
背景尺寸：封面位于url行下方，但它保持100px的图像宽度，然后在屏幕变得太窄时将图像隐藏在彼此下方，就像添加行之前一样。不确定我是否用得不对，也许吧？请参阅挂接您的漂亮答案，如果您想在300px的屏幕宽度下执行此代码，请使用媒体查询@介质（最大宽度：300px）{…}。更多关于媒体的查询太棒了！！这工作得很好：）是的，我使用媒体查询只在低于某个px宽度的情况下才有这种效果。谢谢
.connect li {
    width: 32%;
    max-width: 100px;
}