Search code examples
javascriptjqueryresizeimage-resizingjquery-events

Scale image proportionally to fit current document dimensions


I have an image with some dimension alfa x beta pixels.

Then onDocumentReady and onWindowResize I calculate current document dimensions.

Task is to scale image proportionally until one of dimensions is reached.


Solution

  • $(document).ready(function() {
    
        scaleStart();
    
    });
    
    $(window).resize(function() {
    
        scaleStart();
    
    });
    
    function scaleStart() {
    
        $("#myImage").css("min-width", 0);
        $("#myImage").css("min-height", 0);
    
        var originalWidth = 1762;
        var originalHeight = 1041;
    
        var safeWidth = $(document).width() - 100;
        var safeHeight = $(document).height() - 100;
    
        var scaleWidth = originalWidth / safeWidth;
        var scaleHeight = originalHeight / safeHeight;
    
        if (scaleWidth > scaleHeight)
        {
            $("#myImage").css("min-width", originalWidth / scaleWidth);
            $("#myImage").css("min-height", originalHeight / scaleWidth);
        }
    
        else
        {
            $("#myImage").css("min-width", originalWidth / scaleHeight);
            $("#myImage").css("min-height", originalHeight / scaleHeight);
        }
    
    }