javascript - 试图找出一种调整背景图像大小并包含具有窗口宽度比例的元素的方法

Question

所以我有这个导航菜单设置，尽管目前有 CSS 代码。背景色目前主要用于苦行者。我需要在此设置上有背景图片。不幸的是，由于设计规范的原因，它并不是一个真正流畅的背景。就这样。

我需要制作此背景和包含的元素，以使导航按照我希望根据整体窗口大小调整大小的方式工作。从桌面浏览器到移动设备。

有没有人知道单独使用 CSS 或结合 jQuery 之类的东西来实现这一点？我在一些平台上看到过类似的做法，但不知道他们是如何解决这个问题的

/* wrapper and master settings for over all containers */
#menu_bottom{position:absolute;bottom:0;left:0;z-index:999999;background-color:#F00;width:320px;height:172px;}
#menu_bottom > ul{list-style:none;margin:0;padding:0;}
#menu_bottom > ul > li{list-style:none;margin:0;padding:0;float:left;width:50px;height:172px;background-color:#000;}
/* inactive state (position) */
#menu_bottom > ul > li.fans{background-color:#0F0;}
#menu_bottom > ul > li.gameplan{background-color:#0F0;}
#menu_bottom > ul > li.dashboard{background-color:#0F0;}
#menu_bottom > ul > li.myteams{background-color:#0F0;}
#menu_bottom > ul > li.settings{background-color:#0F0;}

/* active state (position) */
#menu_bottom > ul > li.fans.active{background-color:#00F;}
#menu_bottom > ul > li.gameplan.active{background-color:#00F;}
#menu_bottom > ul > li.dashboard.active{background-color:#00F;}
#menu_bottom > ul > li.myteams.active{background-color:#00F;}
#menu_bottom > ul > li.settings.active{background-color:#00F;}

<div id="menu_bottom">
    <ul>
        <li rel="/" class="f<?php if($activeNav == "c"){echo ' active';} ?>"></li>
        <li rel="/" class="g<?php if($activeNav == "n"){echo ' active';} ?>"></li>
        <li rel="/" class="d<?php if($activeNav == "d"){echo ' active';} ?>"></li>
        <li rel="/" class="m<?php if($activeNav == "f"){echo ' active';} ?>"></li>
        <li rel="/" class="s<?php if($activeNav == "s"){echo ' active';} ?>"></li>
    </ul>
</div>

Answer 1

您必须为所有内容设置一个整体包装器，并在 CSS 中将其设置为 100% 宽度