javascript breaks when I want to print a page

Question

So I created this webpage using JQuery. I use this code to resize the images on my page so that they fit in squares.

<script type="text/javascript">
  $(document).ready(function(){
    var height = $('.square').width();
    $('.square').css('height', height); 
    window.onresize = function(event) {
      var height = $('.square').width();
      $('.square').css('height', height);
   }
 });
</script>

This works perfectly. The images resize to squares when I load the page or when i resize my browser window. The problem is when I go and press print page (I'm using google Chrome). The printer preview loads the page as if these two scripts don't exist. So the images are their original sizes.

Any Ideas ?

Answer 1

If you just want to keep images square, you might not even need javascript, the below gives you an example, the bonus it's responsive..

 .pic-wrapper { width: 40%; float: left; margin-right: 20px; } .pic { width: 100%; padding-bottom: 100%; background-image: url('http://i.imgur.com/uTDpE6J.jpg') } 

 <div class="pic-wrapper"> <div class="pic"> </div> </div> <div class="pic-wrapper"> <div class="pic"> </div> </div>