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