Call different imagecropper crop at different browser widths

Questions
1

Hi Everyone,
I have a banner that calls the image from imagecropper. The banner is created from an xslt macro. I have been searching for quite a while on how to change the image crop to a different image crop when the browser width gets above a certain width.

ie:

  • 1200px wide - show homepageBannerWide cropsize

  • < 1199px wide - show homepageBannerCrop cropsize

Is there anyway to find the browser width from xslt? If xslt can find the browser width then I can put in a when statement.

If not then is there any way to render a macro from inside a javascript call? I could make a second macro, with the different crop in it, and then call in that macro from inside a javascript call, like this:

<script>
$(window).on("resize", function() {
	 if ($(window).width() >= 1200) {
                   RENDER MACRO 1 HERE
 }
	 if ($(window).width() <= 1199) {
                   RENDER MACRO 2 HERE  
     }
});

	</script>

Thanks,
Wade.

This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/74386-call-different-imagecropper-crop-at-different-browser-widths