title: Resize the image according to the window size without having to refresh the page
body: <p>I got the following code below which resizes the image depending on window size. My code only works when you resize then refresh the screen to see the changes. How do i make the image visible or hidden depending on the screen size without having to refresh the screen to see the changes to the image? Is there a better way to do it? </p>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>&lt;script&gt;
      if ($(window).width() &lt; 950) {
         $('body').addClass('imgHide');
          console.log($(window).width());
      }
      else { 
         $('body').addClass('imgShow');
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.imgHide #DuckImg
  {
      visibility: hidden;     
  }
  
  .imgShow #DuckImg
  {
      visibility: visible;
  }      
  </code></pre>
  
  <p><strong>My Image</strong></p>
  
  <pre><code>&lt;img id="DuckImg" class="DuckImg" src="DuckImg.png" alt="DuckImg"  &gt;
  </code></pre>