Меню 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, добавить текстовую тень, некоторые градиенты, границы, и результат будет похожим:)