我正在尝试制作一个响应式网页,我想在其中显示一些带有悬停图像的按钮图像。这些按钮是 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 个按钮,因此在每个 100x100px 时,我希望它们在可用区域宽度 <300~px(边距多一点)时开始整体缩小。我已经尝试通过多种方式定义 background-size
,但它似乎无法满足我的要求。
如有任何帮助,我们将不胜感激!
最佳答案
部分答案:
您描述的行为可以使用 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 ),所以在 fiddle 中我刚刚设置了一个固定的 100px
图片的高度。在任何情况下,设置 background-size
到一个百分比,以确保背景比例符合 <a>
大小。
关于css - 相对于页面宽度缩放 CSS 背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25794645/