Image resize to fit screen

前端 未结 6 1948
情歌与酒
情歌与酒 2020-12-10 19:08

I created this code to resize photos/images to fit the screen, considering the space available for the nav bar.

The script fires on image load and on navigation clic

6条回答
  •  猫巷女王i
    2020-12-10 19:36

    I wrote a plugin!

    jQuery.fn.positionMe = function () {
        var oH = $(window).height();
        var oW = $(window).width();
        var iH = this.outerHeight();
        var iW = this.outerWidth();
    
        // When the image is too small so, do nothing
        if(iW>oW && iH>oH){
    
            // Otherwise, proportionate the image relative 
            // to its container
            if(oH/iH > oW/iW){
                this.css("width", oW);
                this.css("height", iH*(oW/iW))
            } else {
                this.css("height", oH);
                this.css("width", iW*(oH/iH));
            }
    
        }
        return this;
    }
    

    Usage:

    $("#photo").positionMe();
    

提交回复
热议问题