rozmiar obrazka a rozmiar przeglądarki Opcje

[Wowas]

Witam,

Mój problem wygląda następująco.

Mam menu na stronie zbudowane z 5 obrazków :

<a href="index.php?s=1" ><img src="grafika/menu/1.png" width=250px height=100px > </a>
<a href="index.php?s=2" > <img src="grafika/menu/2.png" width=250px height=100px > </a>
<a href="index.php?s=3" > <img src="grafika/menu/3.png" width=250px height=100px > </a>
<a href="index.php?s=4" > <img src="grafika/menu/4.png" width=250px height=100px > </a>
<a href="index.php?s=5" > <img src="grafika/menu/5.png" width=250px height=100px > </a>

w css mam zdefiniowany div na to menu:
#menu{
float:center;
background-color:#4B7BD4;
width: 100%;
height: 100px;
overflow:hidden;
}

Wszystko się ładnie wyświetla jeśli przeglądarka otwarta jest na całość okna. Problem pojawia się jeśli zmniejszymy rozmiar okna przeglądarki...

Próbowałem zapisywać rozmiar obrazków - width=20% height=100% ale to nie działa...

Może da się to jakoś zdefiniować w css??

Ten post edytował Wowas 1.06.2012, 10:53:55

[_tomek]

Może obrazy po prostu nie mieszczą Ci się w oknie?

[Wowas]

Tak obrazy nie mieszczą się w oknie kiedy zmienia się wielkość okna.

Pytanie czy da się jakoś zrobić żeby obrazki przy zmianie wielkości okna przeglądarki zmieniały swoją wielkość

[mccd]

Javascript + JQuery

http://jsfiddle.net/fYeEH/

W przykładzie obrazek zawsze przyjmuje szerokość okna.

[Wowas]

Ok dzięki, ale przed chwilą dosłownie poradziłem sobie z obrazkami stosując klasy dla obrazków

<img class="nazwaklasy"> i w css definiujemy w procentach wielkość zdjęcia i wówczas działa ( jakby ktoś chciał to zrobić wykorzystując tylko css to jest to jedna z opcji)


Natomiast mam kolejny problem i tutaj jest trochę trudniej, otóż do wyskalowania pozostały mi wielkości czcionek... Tekst wyświetla się w 1 srodkowym divie i teraz problem polega na tym że jak zmniejszam rozmiar okna przeglądarki to tekst zostaje w swoich pierwotnych rozmiarach i wygląda nie estetycznie, a poza tym mam wielkość tego diva w px więc może on wykraczać poza diva...

Jakiś pomysł?

Ten post edytował Wowas 7.06.2012, 18:06:35

[Maciek1705]

nie do końca rozumiem twoje zamiary, ale jeśli chcesz zbudować elastyczną stronę dopasowującą treść do rozmiaru przeglądarki to zastosuj html 5. Tam przy załączaniu stylów możesz zadeklarować że ten styl jest dla przeglądarek o rozmiarze okna np mniejszym lub równym 600 px i podpinasz plik z tymi stylami np mniejszymi obrazkami czy czcionką wówczas z tymi obrazkami nie będziesz miał problemu