Resize slike prema veličini preglednika

Prilagođavanje slike veličini internetskog preglednika ne koristimo baš svaki dan, ali postoje situacije kada nam je to baš potrebno. U ovom tutorijalu vam donosimo JavaScript rješenje koje će uvijek držati sliku 100% raširenu u prozoru preglednika. Kod stranice je jako jednostavan:

<html> <head> <script language="javascript"> function ScaleSize() { document.getElementById("slika").style.width=document.body.clientWidth; document.getElementById("slika").style.height=document.body.clientHeight; } </script> </head> <body onload="javascript:ScaleSize();" onresize="javascript:ScaleSize();"> <img id="slika" src="Test.jpg" /> </body> </html>

Za početak nam je potrebno da znamo kolika je veličina samog prozora preglednika. Tu informaciju ćemo dobiti preko document.body.clientWidth i document.body.clientHeight. Kada imamo ove informacije potrebno ih je dodijeliti slici koja se prikazuje u prozoru. Upravo zato imamo ova dva reda koda:

document.getElementById("slika").style.width=document.body.clientWidth; document.getElementById("slika").style.height=document.body.clientHeight;

To je sve što radi ova funkcija koja se nalazi u head dijelu HTML dokumenta. Slici pristupamo preko njenog id-a. Moramo se upoznati sa još jednom mogućnošću, a to je stavljanje onresize eventa u body tag. Na taj način će se ova funkcija pozivati kada se god promijeni veličina prozora. Da bi isprobali gornji kod kliknite na link i probajte mijenjati veličinu prozora.

LINK NA PRIMJER

Ako ste naučili nešto novo napišite jedan komentar podrške.
Hvala!

Autor: Vedran

Datum objave: 30.09.2009

Za vas smo izdvojili:

■  Tabovi na web stranicama
■  Uvod u JavaScript svijet
■  Automatsko generiranje kalendara
■  Dinamičko generiranje izbornika
■  Drag and drop okviri

Zadnjih 5 članaka

■  Izgubljena particija i dokumenti
■  Kako napraviti crosover kabel
■  Spam poruke
■  Hiperveze između Word dokumenata
■  Lozinke, lozinke ...

KOMENTARI:

vedran
23.10.2009

bamp

Samo registrirani korisnici mogu komentirati.