title: Resize all images according to screen resolution before loading a page
body: <p>I cannot find the correct solution for me, none of what I tried is working :(</p>
  
  <p>I need:</p>
  
  <p>before showing page content get screen resolution and then, according to it, resize all <code>img</code>-s on a page.</p>
  
  <p>Ok, what I've tried:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
   $(window).load(function() {
  
   var img = document.images;
  
   if (screen.width &lt;= 699) {  
  
     for (var i = 0; i &lt; img.length; i++) {
  
  
           img[i].height = 200px;
  
  
           img[i].width = 200px;
     }
  
     }
  
   })
  
  
  &lt;/script&gt;
  </code></pre>