如何使图像列表项菜单随屏幕缩小

Question

我有一个导航菜单，由我无法随屏幕缩小的图像女巫组成，当屏幕调整大小时，我希望整个菜单调整大小，但列表项只是跳到下一行。

我已经尝试了宽度/高度

以及最大宽度/高度，我尝试使用不同的单位%和vh，也尝试了显示块和不同的位置，但我无法让它工作，我找不到我出错的地方。任何帮助都非常感谢，谢谢。

代码笔 ： http://codepen.io/mikegr/pen/YNYjLJ

.HTML

<div class="ground">
    <img src="http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/ground_dhn37w.png" />  
    <!--nav menu-->
    <ul id="menu">
        <li id="home"><a  class="current" href="index.html">Home</a></li>
        <li id="about"><a href="about.html">About</a></li>
        <li id="audio"><a  href="audio.html">Audio</a></li>
        <li id="art"><a  href="design.html">Art</a></li>
        <li id="threed"><a  href="modeling.html">3d</a></li>
        <li id="coding"><a href="coding.html">Programming</a></li>
    </ul>
</div>

.CSS

.ground {
    position:fixed;
    left:0px;
    bottom:-1%;
    height:auto;
    width:100%;
    background:#999;
}
ul {
    list-style: none;
}
/* nav menu */
#menu {
    position: absolute;
    top: 6vh;
    z-index: 2;
    width:60%;
    overflow: hidden;
    margin: 0 auto;
    left: 0;
    right: 0;
    max-width: 100%;
    height: auto;
}
#menu li {
    float:left;  /*--- Make the list go horizontal ---*/
    margin:auto;
    padding-right: 2vh;
}
#menu li a {
    display:block;
    text-indent: -9999px; /*--- Push the text off screen to hide text---*/
}
#menu li#home a {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/home_menu_svyjuj.png) no-repeat;
    width:150px;
    height: 75px;
}
#menu li#home a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/home_menu_hover_g4rwhe.png) no-repeat;
}
#menu li#home a.current {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/home_menu_hover_g4rwhe.png) no-repeat;
    cursor:default;  /*--- Show pointer instead of hand cursor for the current page ---*/
}
/* About */
#menu li#about a {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/about_menu_jcz8yx.png) no-repeat;   
    width:150px;
    height: 75px;
}
#menu li#about a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/about_menu_hover_uurcba.png) no-repeat; 
}
#menu li#about a.current {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/about_menu_hover_uurcba.png) no-repeat;
    cursor:default;  
}
/* Graphic design */
#menu li#art a {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/art_menu_mbywzq.png) no-repeat; 
    width:150px;
    height: 75px;
}
#menu li#art a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/art_menu_hover_afaypq.png) no-repeat;   
}
#menu li#art a.current {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/art_menu_hover_afaypq.png) no-repeat;
    cursor:default;  
}
/* Modeling/Animation */
#menu li#threed a{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/3d_menu_dptfpv.png) no-repeat;  
    width:150px;
    height: 75px;
}
#menu li#threed a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/3d_menu_hover_pqnxfs.png) no-repeat;    
}
#menu li#threed a.current {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/3d_menu_hover_pqnxfs.png) no-repeat;
    cursor:default;  
}
/*Programming*/
#menu li#coding a {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/programming_hzslwa.png) no-repeat;  
    width:170px;
    height: 75px;
}
#menu li#coding a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/programming_hover_crywht.png) no-repeat;    
}
#menu li#coding a.current{
    background: url(.http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/programming_hover_crywht.png) no-repeat;
    cursor:default;  
}
/* Audio */
#menu li#audio a {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/audio_vvgdur.png) no-repeat;    
    width:150px;
    height: 75px;
}
#menu li#audio a:hover {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/audio_hover_bnrvb0.png) no-repeat;  
}
#menu li#audio a.current {
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/audio_hover_bnrvb0.png) no-repeat;
    cursor:default;  
}

Answer 1

好的，

我只是自己修复了它，对不起，这是通常会发生的事情。

我只是将宽度更改为 vh，问题是我需要添加

background-size:     cover;                     
background-repeat:   no-repeat;
background-position: center center; 

Answer 2

您正在为图像设置宽度（以像素为单位）。这将阻止它们根据需要调整大小。