title: CSS to auto-fit image to screen when iPhone rotated from portrait to landscape
body: <p>I'd like to have an image fit the screen without being cropped in both portrait and landscape mode for responsive design. I've tried:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  img {
      max-height:100%;
      max-width:100%;
  }
  &lt;/style&gt;
  &lt;meta name="viewport" content="initial-scale=1.0" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;center&gt;
  &lt;img src = "http://www.terragalleria.com/tmp/square.jpg" /&gt;
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The image is a square. If the page is loaded while the iPhone is in portrait orientation, it stretches to fill the width of the screen, with space at the bottom, which is what I wanted. </p>
  
  <p>However, if I rotate the iPhone to landscape orientation, the image now stretches to fill the width of the screen and is cropped in the vertical direction. What I wanted instead is to have the image stretch to fill the height of the screen with white space on the sides. </p>
  
  <p>In order to see that, I need to reload the page. Is there any way to achieve the correct resize upon iPhone rotation without need for the user to reload the page ? </p>