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.