Posted By

hectorlorenzo on 11/15/11

Tagged

Versions (?)

Last Edited at 11/15/11 01:45am

Statistics

Viewed 659 times

Favorited by 0 user(s)

Related snippets

Resize background image

/ Published in: JavaScript

FunciÃ³ que agafa les mides de la pantalla i redimensiona proporcionalment una imatge per a que s'adapti a ella.

Highlighted TextExpand

function resizeBkg()
{
	//Cogemos el tamaÃƒï¿½Ã‚Â±o de la pantalla, y calculamos su ratio
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	
	var pantallaRatio = windowWidth / windowHeight;
	
	//Guardamos la imagen en una variable
	var imagen = $("#bkg-image img");
	
	//Cogemos el tamaÃƒï¿½Ã‚Â±o de la imagen, y tambiÃƒï¿½Ã‚Â©n calculamos su ratio
	var imgHeight = imagen.height();
	var imgWidth = imagen.width();
	
	var imgRatio = imgWidth / imgHeight;
	
	//Si el ratio de la pantalla es mayor que el de la imagen, seÃƒï¿½Ã‚Â±al que la anchura de la pantalla es mayor que la de la imagen
	//Tendremos que hacer que las anchura sean iguales y multiplicar
	if (imgRatio > pantallaRatio)
	{
		imagen.height(windowHeight).width(windowHeight * imgRatio);
	}
	else
	{
		imagen.width(windowWidth).height(windowWidth / imgRatio);
	}
	
	//Hacemos que el container de la imagen sea igual la pantalla.
	//Recordar que el estilo del container debe ser overflow: hidden
	var container = $("#bkg-image");
	
	container.height(windowHeight).width(windowWidth);
	
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.