Advanced Search

Resize background image

/ Published in: JavaScript
Save to your folder(s)
Funció que agafa les mides de la pantalla i redimensiona proporcionalment una imatge per a que s'adapti a ella.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function resizeBkg()
  2. {
  3. 	//Cogemos el tama�±o de la pantalla, y calculamos su ratio
  4. 	var windowHeight = $(window).height();
  5. 	var windowWidth = $(window).width();
  6.  
  7. 	var pantallaRatio = windowWidth / windowHeight;
  8.  
  9. 	//Guardamos la imagen en una variable
  10. 	var imagen = $("#bkg-image img");
  11.  
  12. 	//Cogemos el tama�±o de la imagen, y tambi�©n calculamos su ratio
  13. 	var imgHeight = imagen.height();
  14. 	var imgWidth = imagen.width();
  15.  
  16. 	var imgRatio = imgWidth / imgHeight;
  17.  
  18. 	//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
  19. 	//Tendremos que hacer que las anchura sean iguales y multiplicar
  20. 	if (imgRatio > pantallaRatio)
  21. 	{
  22. 		imagen.height(windowHeight).width(windowHeight * imgRatio);
  23. 	}
  24. 	else
  25. 	{
  26. 		imagen.width(windowWidth).height(windowWidth / imgRatio);
  27. 	}
  28.  
  29. 	//Hacemos que el container de la imagen sea igual la pantalla.
  30. 	//Recordar que el estilo del container debe ser overflow: hidden
  31. 	var container = $("#bkg-image");
  32.  
  33. 	container.height(windowHeight).width(windowWidth);
  34.  
  35. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.