jQuery ci permette di realizzare l'effetto delle immagini di sfondo a tutto schermo che si adattano alla dimensione della finestra del browser. In questo articolo vedremo come realizzare questo effetto.
Partiamo da questa marcatura:
<body>
<div id="overlay">
<img src="base.jpg" alt="" id="base" />
</div>
</body>
Nel CSS useremo il posizionamento fisso per fare in modo che l'immagine sia sempre centrata nella finestra:
html, body {
height: 100%;
min-height: 100%;
}
#overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#base {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
Con jQuery dobbiamo solo calcolare il rapporto esistente tra le dimensioni della finestra e le dimensioni della nostra immagine:
$(function() {
var bgImage = $('#base');
function resizeImg() {
var imgwidth = bgImage.width(),
imgheight = bgImage.height(),
winwidth = $(window).width(),
winheight = $(window).height(),
widthratio = winwidth / imgwidth,
heightratio = winheight / imgheight,
widthdiff = heightratio * imgwidth,
heightdiff = widthratio * imgheight;
if(heightdiff>winheight) {
bgImage.css({
width: winwidth+'px',
height: heightdiff+'px'
});
} else {
bgImage.css({
width: widthdiff+'px',
height: winheight+'px'
});
}
}
resizeImg();
$(window).resize(function() {
resizeImg();
});
});
Potete visionare l'esempio finale in questa pagina.