CSS菜单与背景图像。如何使用％和EM正确缩放和缩放

Question

我有这个菜单; http://fhemmel.host56.com/stack/ 我希望它在我调整窗口大小时按比例放大和缩小，但仍然可以正确显示％和EM。我试图修正x和y位置以及基本位置以使其显示，但我无法让它出现。

任何？

Answer 1

我想你需要它用于手机:)最好的方法是用％来做，然后一切都将是自动的，但对于这而不是将图像作为背景，你需要将它们作为HTML标记。你不能重新缩放背景元素（好吧，你可以用transform：scale来做，但在这种情况下它没有帮助你。）

然后你会有这样的事情http://jsfiddle.net/55m8j/1/：

<nav>
   <ul>
    <li><a href="index.html" id="side1"><img src="image1.jpg"></a></li>             
    <li><a href="index.html" id="side2"><img src="image2.jpg"></a></li>
    <li><a href="index.html" id="side3"><img src="image3.jpg"></a></li>
    <li><a href="index.html" id="side4"><img src="image4.jpg"></a></li>
    <li><a href="index.html" id="side5"><img src="image5.jpg"></a></li>
   </ul>
</nav>

和CSS

nav ul {list-style-type: none;}
nav ul li {width: 20%; float: left;}
nav ul li a {display: block;}
nav ul li a img {width: 100%; }

其他方式只是使菜单不作为图像。您可以使用squirell渲染字体，添加文本阴影，一些渐变，边框，结果将类似:)