title: Resizing images in an EPUB (v3)
body: <p>I am building an EPUB for my in-laws that contains a collection of old scanned pictures, along with commentary.</p>
  
  <p>Each "page" in the EPUB contains a header with the picture number, the picture and some text. The pictures are sized to 1024x768 in the EPUB, and I am trying to resize the images using CSS to display on the page. (I could just crunch the pictures down, but I would like to allow readers to tap on the picture and get a larger image if they want)</p>
  
  <p>The HTML for this looks like this:</p>
  
  <pre><code>&lt;div class="keepTogether"&gt;
      &lt;h5&gt;50001&lt;/h5&gt;
      &lt;div class="sized"&gt;
          &lt;img alt="50001" src="images/50001-Front.jpg"/&gt;
      &lt;/div&gt;
      &lt;p&gt;
      #50001 Lorem ipsum dolor sit amet, consectetur adipiscing elit
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS is:</p>
  
  <pre><code>div.keepTogether {display:inline-block; page-break-before:always;}
  h5 { text-align: center; font-style:italic; margin: 0px; }
  div.sized { max-height: 40%; width: auto; }
  img { max-width: 100%; max-height: 100%; }
  </code></pre>
  
  <p>The problem is that this doesn't work.  The images show up on the page (in iBooks on the Mac and on the iPad) as almost full-screen, with only the header sharing the page with them. The text is mostly pushed off onto the next page.</p>
  
  <p>I have loaded the HTML up in Chrome, and used the developer tools to make sure that all the connections are correct. If I muck with <code>div.sized { max-width: 40%; height: auto; }</code> in Chrome, the images resize appropriately.</p>
  
  <p>Am I doing something basic wrong here?
  Does iBooks just not support this kind of CSS resizing?
  Is there an alternate way of accomplishing what I want?</p>
  
  <p>Thanks in advance.</p>