title: Can't resize image using CSS
body: <p>I've tried every answer I could find on all the sites I could find, but still haven't been able to properly resize an image using CSS. I've got it inside a div, and tried resizing either one and resizing both. I'm trying to fit the image (underneath my navigation bar) to the page (meaning: as wide as the page, and relative height).</p>
  
  <pre><code>&lt;div id="banner"&gt;&lt;img src="resources/img/banner.png" class="myImage"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>First attempt:</p>
  
  <pre><code>.myImage{
      max-width: 100%;
      height: auto;
      left: 0px;
      right: 0px;
  }
  </code></pre>
  
  <p>Second attempt:</p>
  
  <pre><code>#banner{
      max-width: 100%;
      height: auto;
      left: 0px;
      right: 0px;
  }
  </code></pre>
  
  <p>Third attempt:</p>
  
  <pre><code>&lt;div id="banner"&gt;&lt;img src="resources/img/banner.png" id="myImage"&gt;&lt;/div&gt;
  
  #banner{
      max-width: 100%;
      height: auto;
      left: 0px;
      right: 0px;
  }
  
  #myImage{
      max-width: 100%;
      height: auto;
      left: 0px;
      right: 0px;
  }
  </code></pre>