jQuery resize to aspect ratio

by

Here’s a useful function that might do what you want:

jQuery.fn.fitToParent = function()
{
    this.each(function()
    {
        var width  = $(this).width();
        var height = $(this).height();
        var parentWidth  = $(this).parent().width();
        var parentHeight = $(this).parent().height();

        if(width/parentWidth < height/parentHeight) {
            newWidth  = parentWidth;
            newHeight = newWidth/width*height;
        }
        else {
            newHeight = parentHeight;
            newWidth  = newHeight/height*width;
        }
        var margin_top  = (parentHeight - newHeight) / 2;
        var margin_left = (parentWidth  - newWidth ) / 2;

        $(this).css({'margin-top' :margin_top  + 'px',
                     'margin-left':margin_left + 'px',
                     'height'     :newHeight   + 'px',
                     'width'      :newWidth    + 'px'});
    });
};

Basically, it grabs an element, centers it within the parent, then stretches it to fit such that none of the parent’s background is visible, while maintaining the aspect ratio.

Then again, this might not be what you want to do.

More Related Contents:

  1. how to resize responsive image up and down
  2. How do I make two images fade in/out repeatedly? [closed]
  3. How to get image size (height & width) using JavaScript?
  4. Check if an image is loaded (no errors) with jQuery
  5. Changing the image source using jQuery
  6. Asynchronously load images with jQuery
  7. How to resize images proportionally / keeping the aspect ratio?
  8. Image preloader javascript that supports events
  9. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  10. Using jQuery, Restricting File Size Before Uploading
  11. How can I determine if an image has loaded, using Javascript/jQuery?
  12. How to silently hide “Image not found” icon when src source image is not found
  13. In Bootstrap open Enlarge image in modal
  14. JS – get image width and height from the base64 code
  15. Load image with jQuery and append it to the DOM
  16. How do I abort image load requests without using window.stop()
  17. JavaScript: Know when an image is fully loaded
  18. Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
  19. Get image width and height from the Base64 code in JavaScript
  20. How to get the image size (height & width) using JavaScript
  21. Cancel single image request in html5 browsers
  22. Using image.complete to find if image is cached on chrome?
  23. How to create a new img tag with JQuery, with the src and id from a JavaScript object?
  24. jQuery, JavaScript, HTML: how to load images after everything else is loaded?
  25. Center an Image vertically and horizontally using CSS
  26. canvas- Cropping images in different shapes
  27. How do I get natural dimensions of an image using JavaScript or jQuery?
  28. How should I crop an image at client side using jcrop and upload it?
  29. Remove selected file(s) before upload with Javascript
  30. Crop image white space automatically using jQuery

Leave a Comment