javascript ломается, когда я хочу распечатать страницу

Question

Итак, я создал эту веб-страницу с помощью JQuery. Я использую этот код для изменения размеров изображений на моей странице, чтобы они поместились в квадраты.

<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> 

Это прекрасно работает. Размер изображения изменяется до квадратов при загрузке страницы или изменении размера окна браузера. Проблема заключается в том, когда я иду и нажимаю страницу печати (я использую Google Chrome). Предварительный просмотр принтера загружает страницу так, как если бы эти два сценария не существовали. Таким образом, изображения являются их оригинальными размерами.

Любые идеи?

Answer 1

Если вы просто хотите сохранить изображения квадрат, вы можете даже не нужно JavaScript, ниже дает пример, бонус это реагирует ..

.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>