Edit: I submitted this code to Jiminy Panoz and got an extensive reply from him. The use of an image inside a <svg> tag is discouraged by many resellers AND the Apple guidelines. For the full reply: https://github.com/FriendsOfEpub/Blitz/issues/25
Edit: This code is for EPUB3 ONLY!
I came up with what seem to be a revolutionary code that solves all of the problems for full page images AND images with caption. Before making a formal announcement with my company I’d love if some of you guys could double check my code and see if it is as good as I think it is. I tested it with an ePub3 on ADE on Windows 10, iBooks on iPad, and on Android, Bluefire, Google Books and Gitden Reader.
Full page images (the height="98%" is for Bluefire, else it creates a blank page before the image):
Code:
<div>
<svg style="height: 100vh; width: 100vh" xmlns="http://www.w3.org/2000/svg" height="98%" preserveAspectRatio="xMidYMid meet" version="1.1" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
</div>
Image with caption:
Code:
<figure>
<svg style="height: 60vh; width: 100vh" xmlns="http://www.w3.org/2000/svg" height="60%" preserveAspectRatio="xMidYMid meet" version="1.1" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="100%" width="100%" xlink:href="../Images/C1.jpg"/></svg>
<figcaption>Insert your caption here, and don’t put it in a <p></figcaption>
</figure>
CSS for the image with caption:
Code:
figure {
text-indent: 0;
text-align: center;
}
figcaption {
font-size: 0.7em;
line-height: 1.2;
text-indent: 0;
}