Witam,
Natknąłem się na problem z kodowaniem layoutu. Mianowicie mam dwa duże
obrazki (obok siebie) na cały ekran. Które powinny dostosowywać się do
rozdzielczości monitora. Jak mądrze zakodować aby dla różnych
rozdzielczości zawsze obrazki były dostosowane (bez pasków), aby
automatycznie się skalowały. Docelowo mają one być linkami, po
najechaniu będzie na nich pojawiały się napisy.

Pozdrawiam
Wojtek

do góry

Dnia Tue, 06 Mar 2012 13:45:17 +0100, Wojo napisał(a):

> Natknąłem się na problem z kodowaniem layoutu. Mianowicie mam dwa duże
> obrazki (obok siebie) na cały ekran. Które powinny dostosowywać się do
> rozdzielczości monitora. Jak mądrze zakodować aby dla różnych
> rozdzielczości zawsze obrazki były dostosowane (bez pasków), aby
> automatycznie się skalowały. Docelowo mają one być linkami, po
> najechaniu będzie na nich pojawiały się napisy.

Jeśli nie interesują cię stare przeglądarki to możesz użyć
background-size z css3.

<ul class="swinki">
<li><a href="#">zielona swinka</a></li>
<li><a href="#">czerwona swinka</a></li>
</ul>

i style:

ul.swinki li:first-child a {
background: green url('swinka1.jpg') no-repeat left top;
background-size: 100% 100%;
}

ul.swinki li:last-child a {
background: red url('swinka2.jpg') no-repeat left top;
background-size: 100% 100%;
}

a całość wygląda tak:
http://tmp.slimaczek.pl/tmp/skalowanie/

--
Tomek

do góry