title: iPhone Mail resizing images/div in html email
body: <p>I'm using MadMimi for email promotions. So far, my emails look consistent across all browsers and devices, including iOS on iPad (in the Mail app). There is, however, a weird resizing issue with images on iOS on the iPhone (again, the Mail app). See the CSS and screenshot below. As you can see, the image bursts out of the width of its parent element. Does anyone know why this happens or how to correct it? Thanks.</p>
  
  <p>CSS:</p>
  
  <pre><code>.outer-wrapper {
       width: 600px;
       max-width: 100%;
       margin: 0 auto;
  }
  .inner-wrapper {
       width: 100%;
       border-radius: 10px;
       overflow: hidden;
       background-color: white;
       border: 1px solid #dddddd;
  }
  img {
       width: 600px;
       max-width: 100%;
       height: auto;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
     &lt;div class="outer-wrapper"&gt;  
        &lt;div class="browser"&gt;Email look weird? Be sure to enable images, or view it on the web &lt;a href="[[web_link]]" target="_blank"&gt;here&lt;/a&gt;.&lt;/div&gt;
        &lt;div class="inner-wrapper"&gt;
           &lt;a href="#"&gt;&lt;img src="http://pintsizedtreasures.com/newsletters/header-2.jpg"&gt;&lt;/a&gt;
           &lt;div class="body-wrapper"&gt;
              [content...]
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Dy4UJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Dy4UJ.png" alt="Screenshot from iPhone Mail"></a></p>