I have an image inside an html module and I want it to automatically resize for mobile/tablets. The image size is 600px x 216px and looks ok on my desktop but it is way too big for mobile/tablets. I found the following javascript code and inserted it into the page header metatags -

$(document).ready(function() {

     // Set the variable $width to the width of our wrapper on page load

     $width = $('#content').width();

     // Target all images inside the #content. This works best if you want to ignore certain images that are part of the layout design

     $('#content img').css({

          // Using jQuery CSS we write the $width variable we previously specified as a pixel value. We use max-width incase the image is smaller than our viewport it won't scale it larger. Don't forget to set height to auto or else it will squish your photos.

          'max-width' : $width , 'height' : 'auto'

          });

     });

</script>

Then I used the following within the html module -

<div id="content"><img alt="" src="/portals/3/logo.jpg" /></div></div>  

It works ok but I am wondering if this is the best way to do it or should I be doing it in the page skin?

 Thanks

And the code I posted is the correct way to resize the image??

Thanks