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.
No comments:
Post a Comment