【问题标题】:making a set of buttons with background image responsive on window resize?在窗口调整大小时制作一组带有背景图像的按钮?
【发布时间】:2012-05-31 15:03:58
【问题描述】:

我有 3 个带有背景图像的列表项,这些列表项包含在一个具有最大宽度的 div 中,我想要做的是在调整窗口大小时缩放列表项的尺寸,但我还没有这样做没有运气。我试过设置百分比高度和宽度也试过使用背景大小。谁能建议我如何实现这一目标?

CSS

​#test{max-width:302px;width:100%;}
#test li{background:url('http://www.dummyimage.com/100/000/fff') no-repeat 0 0;max-width:100px;width:100%;height:100%;background-size:100% auto;float:left;margin-left:1px;}
#test li:first-child{margin-left:0;}

HTML

​<ul id="test">
    <li></li>
    <li></li>
    <li></li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​

【问题讨论】:

    标签: html css responsive-design


    【解决方案1】:

    将#test li 的宽度更改为百分比值! http://jsfiddle.net/baGuZ/

    【讨论】:

    • 谢谢你的回复,我怎么能控制这些的高度呢?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-29
    • 2012-11-04
    • 2014-07-26
    • 1970-01-01
    • 2023-02-11
    相关资源
    最近更新 更多