title: Why doesn't the image change size when I minimize the screen?
body: <p>Why doesn't the image change size when I make the screen smaller? I want to make my image re-size when I make the screen bigger or smaller. this is what I was trying using VS code. I am new to programming so I am kinda stuck. any help would be appreciated.!</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Pricing&lt;/title&gt;
      &lt;meta name="viewport" content="width:device-width initial-scale:1.0"&gt;
  
      &lt;style&gt;
          img{height:auto;
          width:fit-content}
      &lt;/style&gt;
      
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1 style=font-family:impact;font-size:100px;color:darkblue;text-align:center&gt; Class Fee 2021&lt;/h1&gt;
      
      
      &lt;table style="border: 1px solid black; width:75%;text-align:center"&gt;
      &lt;tr style="background-color:royalblue;color:white"&gt;
          &lt;th&gt;Membership Type&lt;/th&gt;
          &lt;th&gt;Class Limit (Per week)&lt;/th&gt;
          &lt;th&gt;Weekly Fee&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td style="padding-left:10px;"&gt;basic Memebrship&lt;/td&gt;
          &lt;td style="padding-left:10px;"&gt;3&lt;/td&gt;
          &lt;td style="padding-left:10px;"&gt;50&lt;/td&gt;
   &lt;/tr&gt;
      &lt;/table&gt;
  
  
  &lt;img src=boxingback.jpg  alt='wallpaper'&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>