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');
}

我对我正在尝试做的事情here做了一个小问题。每行将有3个按钮，因此每当100x100px时，我希望它们在可用区域宽度<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>的大小进行缩放。

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

1 个答案: