title: Resizing an image based on browser size
body: <p>I'm trying to resize a background image on my Square space website (link <a href="http://www.worldsofepoch.com/custom-carousel-test/?rq=carousel" rel="nofollow noreferrer">here</a>) based on the size of the user's browser window. More specifically, if the user's window size drops below a certain width then the image adjusts to a smaller size and maintains its aspect ratio.</p>
  
  <p>This seems to be a common issue. I've been digging for hours now and can't seem to find a solution. I'm using JavaScript to do the work, but it won't get it done.</p>
  
  <p>Mind you all, I'm talking about something different than fluid resizing (i.e. using percentage values).</p>
  
  <p>I've run this code through a quality validation and it came back with no syntax errors. So beyond this, I'm lost.</p>
  
  <p>I injected this (jQuery) script into the page header:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      function imageresize() {
          var contentwidth = $(window).width();
          if ((contentwidth) &lt; 1500) {
              $(".widescreen").attr("height", "480px");
          } else {
              $(".widescreen").attr("height", "768px");
          }
      }
      imageresize(); //Triggers when document first loads    
  
      $(window).on("resize", function() {
          imageresize();
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.widescreen {
    background: url(https://i.imgur.com/96pxGnd.jpg) center top no-repeat;
    background-size: cover;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 768px;
    /* Trying to change this value so the rest of the CSS adjusts accordingly */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is the syntax wrong? Please help! And thank you in advance.</p>