gasparesganga/jquery-loading-overlay

Images that are not square are cut-off

Closed this issue · 3 comments

In attempting to configure a full-page overlay, any image that is not square is cut-off horizontally. I'm not sure if this is a configuration issue or other fault of mine in loading the js?

// Show full page LoadingOverlay
$.LoadingOverlay("show", {
    fade            : false,                          // Boolean/Integer/String/Array
    image       : "/static/images/logo.png",
    imageAnimation          : "",             // String/Boolean
    imageAutoResize         : true,                              // Boolean
    imageResizeFactor       : 1,                                 // Float
    imageClass              : "",                                // String/Boolean
    imageOrder              : 1,                                 // Integer
    background              : "rgba(255, 255, 255, 1)",        // String
    size            : "10",
    maxSize         : "false",    
    minSize         : "false",                        // Integer/String
    fade                    : [0, 800],                        // Array/Boolean/Integer/String
});

// Hide it after 2 seconds
setTimeout(function(){
    $.LoadingOverlay("hide");
}, 1000);

Version 1.6 and prior seem to work without issue.

The image is supposed to be squared, with the same width and height. Due to the adaptive nature of the plugin, CSS width and height are both changed to properly rezise the elements.

Version 1.6 did not offer the variety of elements v2 is offering now. The code has been completely rewritten since then.

I think the headaches and potential issues (to other users relying on that behaviour) to give the possibility to overflow the image are not really worth it.

The simplies solution would be modifying your image to make it squared. Since it's a PNG already, you can just create a transparent empty area in order to equalize width and height.

I guess the solution proposed worked fine.
I'm closing this, cheers.