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.


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.