title: responsive img resizing doesn't work on iPad
body: <p>I am having troubles with my portfolio website being viewable on iPads and iPhones (iPhones - I have a seperate style sheet that loads based on screen size - but still isn't ideal)</p>
  
  <p>I have a class for every image like so:</p>
  
  <p><code>&lt;img src="6.jpg" class="resize" /&gt;</code></p>
  
  <p>and this means it is resized to the height of the window, meaning the  largest possible image on any viewer's screen:</p>
  
  <p><code>.resize {height: 100%; width:auto;}</code></p>
  
  <p>This works fine but on iPads and iPhones the images seem to display at a ridiculously large version of itself like 1000% or something thereabouts. Why would this piece of code not display properly on a mobile device?</p>
  
  <p>Thanks</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div id="maincontainer" &gt;
  
  &lt;p&gt;&lt;i&gt;A Working Title&lt;/i&gt;&lt;/p&gt;
  
  
  
  &lt;div id="img_container"&gt;
  &lt;img src="6.jpg" class="resize" /&gt;&lt;/div&gt;
  &lt;div id="img_text"&gt;Caption text&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  #maincontainer {
  height: 100%;
  max-height:100%;
  width:100%; max-width:100%;
  }
  
  #img_container {
  height: 100%;
  max-height:100%;
  width:100%; max-width:100%;
  }
  
  .resize {
  height: 100%; width:auto;
  }
  </code></pre>