Open dantahoua opened 9 years ago
+1
+1!
+1
Here's a possible solution:
I added this to my index.html
// Get all heights on window load
// This is necessary to get the correct outerHeight values
// See: http://stackoverflow.com/a/21124648
$(window).load(function(){
// Calculate real height of the content
contentheight =
$("header").outerHeight(true) +
$("main").outerHeight(true) +
$("footer").outerHeight(true);
// If calculated content height is smaller than the window
// set the container height to window height.
// Otherwise set it to match the content height
if (contentheight < $(window).height()) {
$(".container").height($(window).height())
} else {
$(".container").height(contentheight)
}
// background-blur.js
$('.container').backgroundBlur({
imageURL : 'images/bg2.jpg',
blurAmount : 7,
imageClass : 'bg-blur',
overlayClass : 'bg-blur-overlay'
});
});
// Function on window resize
$(window).resize(function() {
// Compare the heights again, just like before
if (contentheight < $(window).height()) {
$(".container").height($(window).height())
} else {
$(".container").height(contentheight)
}
// Small fix to get the "viewBox" attribute case sensitive
// See here: http://stackoverflow.com/a/22335908
$.attrHooks['viewbox'] = {
set: function(elem, value, name) {
elem.setAttributeNS(null, 'viewBox', value + '');
return value;
}
};
// Setting variables for dynamic width and height
var dynamicwidth = $( ".container" ).width();
var dynamicheight = $( ".container" ).height();
// Updating attributes
$(".bg-blur").attr("width", dynamicwidth).attr("height", dynamicheight);
$(".bg-blur").attr("viewBox", "0 0 " + dynamicwidth + " " + dynamicheight);
});
Then I just updated my background-blur.js like this:
line 255: change preserveAspectRatio: 'none'
to preserveAspectRatio: 'xMidYMid slice'
line 271: change width: width,
to width: '100%',
line 272: change height: height,
to height: '100%',
line 276: change preserveAspectRatio: 'none'
to preserveAspectRatio: 'xMidYMid slice'
I'm still learning Javascript, so the code may be a bit messy. But it get's the job done for me.
Tested in Chrome, Firefox and Edge
The only problem I found is that when your resize the screen, the blured svg do not change size. Not a problem if you go from larger to smaller but the other way let a big empty space... I changed the width of the SVG to "100%" and it's better, even if the ratio is not good, at least it's not empty... Any idea there to keep the aspect ratio?