05-16-2017, 09:33 AM | #1 |
Connoisseur
Posts: 79
Karma: 228
Join Date: Aug 2014
Device: lambda k21
|
Centering an image in kobo epub
If I want to make a page with an image horizontally centered at 20% from the top, in an epub I draw a table like this:
Code:
<body> <table border="0" width="100%" height="555em"> <tr height="20%"> <td width="33.3%"> </td> <td width="33.3%"> </td> <td width="33.3%"> </td> </tr> <tr height="30%"> <td> </td> <td align="center" vertical-align="middle"> <img src="../images/animage.jpg" width=100%/> </td> <td> </td> </tr> <tr height="50%"> <td> </td> <td> </td> <td> </td> </tr> </table> </body> But the same thing doesn't work into a kepub, the image is showed at full screen as if the table didn't exist. In ADE the image is not showed at all. QUESTION: How can I make a page with an image horizontally centered at 20% from the top, into a kepub and that shows correctly in ADE too? Last edited by Sam Sahara; 05-16-2017 at 12:35 PM. |
05-16-2017, 09:36 PM | #2 | |
Wizard
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
|
<img> must have an alt attribute, and the width parameter must have quotes:
Code:
<img src="../images/animage.jpg" width="100%" alt="image"/> The KePub reader automatically makes an image full-screen if it meets certain criteria. I'm not sure exactly what the criteria are, but roughly: if the html file is the first one displayed in the book, or contains nothing but an image, then it is usually displayed full-screen. You should be able to avoid that by including some visible text in the same file as the image, such as a caption. Quote:
Code:
<body> <div style="text-align:center;padding-top:20%"> <img src="../images/animage.jpg" alt="image" style="width:33.3%;max-height:80%;"/> </div> </body> Last edited by GeoffR; 05-16-2017 at 09:45 PM. Reason: image width 33.3% of screen width... |
|
Advert | |
|
05-19-2017, 09:13 PM | #3 |
Wizard
Posts: 1,144
Karma: 5061953
Join Date: Jun 2011
Location: Ontario, Canada
Device: Kobo Aura HD
|
Any image with no text will get treated as a picture, stretched (or shrunk) to fit the page. The titlepage gets complete full screen, (that might be because it's the first page,, I've not tested what condition defines cover, other than all my book shave a cover image, and it just works.). Other pictures will be fit in the frame with the header, footer and margins.
|
Tags |
html, kepub, table |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Universal Solution for Centering Text Under Image | Trane | Sigil | 45 | 05-16-2017 07:05 AM |
Conversion limitation: Centering image [docx to mobi] | zonoiko | Calibre | 1 | 09-25-2013 12:40 AM |
table centering in ePub | liinak | ePub | 1 | 05-24-2013 05:41 PM |
Touch Best image size in epub format for Kobo touch | zztush | Kobo Reader | 2 | 04-28-2013 09:32 AM |
how come my kobo epub won't show a cover image? | mayamo | Kobo Reader | 4 | 11-15-2011 04:31 PM |