调整背景图像大小

Posted 2021-02-24

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

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);
 
}