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 podržite ovog autora jednim klikom na reklamu ispod njegovog imena.
Hvala!

Autor: Vedran

Datum objave: 30.09.2009

Za vas smo izdvojili:

■  DOM - uvod
■  Dinamičko generiranje izbornika
■  Kontrola toka izvršavanja
■  Dinamički promijenite veličinu slova
■  Saznajte visinu i širinu Internet preglednika

Zadnjih 5 članaka

■  Kako prebaciti PDF u Word dokument
■  Kako postaviti stranicu na Internet
■  Cyclic Redundancy Check error
■  Riješite se Antivirus 2009 - rogue programa
■  Jednostavni Tooltip box

KOMENTARI:

vedran
23.10.2009

bamp

Samo registrirani korisnici mogu komentirati.