Guest User

Untitled

a guest
Jun 18th, 2018
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.19 KB | None | 0 0
  1. //Adjust image size
  2. //needs jquery
  3. //put a #grid and #resizeme on your html and call $('#resizeme').resizeimg()
  4. $.fn.resizeimg = function() {
  5. //Define starting width and height values for the original image
  6. var startwidth = 1280;
  7. var startheight = 960;
  8. //Define image ratio
  9. var ratio = startheight/startwidth;
  10. //Gather browser dimensions
  11. var browserwidth = $(window).width();
  12. var browserheight = $(window).height();
  13. //Resize image to proper ratio
  14. if ((browserheight/browserwidth) > ratio) {
  15. $(this).height(browserheight);
  16. $(this).width(browserheight / ratio);
  17. $('#grid').height(browserheight);
  18. $('#grid').width(browserheight / ratio);
  19. $(this).children().height(browserheight);
  20. $(this).children().width(browserheight / ratio);
  21. } else {
  22. $(this).width(browserwidth);
  23. $(this).height(browserwidth * ratio);
  24. $('#grid').width(browserwidth);
  25. $('#grid').height(browserwidth * ratio);
  26. $(this).children().width(browserwidth);
  27. $(this).children().height(browserwidth * ratio);
  28. }
  29. //Make sure the image stays center in the window
  30. $(this).children().css('left', (browserwidth - $(this).width())/2);
  31. $(this).children().css('top', (browserheight - $(this).height())/2);
  32. };
Add Comment
Please, Sign In to add comment