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

标签 css background-image scaling

我正在尝试制作一个响应式网页,我想在其中显示一些带有悬停图像的按钮图像。这些按钮是 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/

相关文章:

css - 内联显示两个 div。为什么显示:inline have to be in the nested div?

css - Primefaces 哨兵固定左侧菜单位置

ios - 如何缩放应用程序,使 iPhone 6 与 iPhone 5 SpriteKit 相同(缩放)

css - 如何使背景图像可访问?

html - 防弹背景 MSO 扭曲 Outlook 的电子邮件布局

javascript - 使用最近邻算法缩放 Canvas 图像

java - 使用 Apache Batik 缩放 SVG 图像时如何忽略比例?

html - 将 Logo 和链接放在标题中的同一行

javascript - 在javascript中暂停和恢复setInterval

css - 用移动设备的颜色替换背景图像