Quote:
Originally Posted by hfpop
KOreader under Kindle, rendering epub files. I assume it uses the file data/epub.css.
The first page displayed is the cover. The image is rendered at the top and to the left of the page. I definitely want to change this such that the cover is scaled at 100% width and height of the screen.
What are the css classes and selectors dealing with this? Or otherwise, is there a tutorial available for koreader rendering?
Thak you for any input.
|
Koreader still suffers from some constraints regarding image display. I found that svg wrappers are not displayed correctly, that usual css properties like
max-width give inconsistent results; I looked for some workarounds to get -for me- good enough results. Now I stick with
relative width though
absolute width should also be OK.
Best results are obtained with this kind of xhtml and css code: (YMMV)
Spoiler:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" xml:lang="fr-FR">
<head>
<title>Image</title>
<style type="text/css">body { margin:0 }</style>
</head>
<body>
<div style="text-align:center">
<img alt="Image" id="Image1graphic" src="cover.jpg" style="width:87%"/>
</div>
</body>
</html>
If you want a fine display, the precise relative width must be calculated from the image dimensions using this formula: W/H and ×4/3.
Try to replace the existing code with this one in the EPUB. For using it quickly with the Calibre editor, I made a snippet out of it and I trigger it with the tag
img.
Of course, when looking at your EPUB, you have then to use the reading option of the "Integrated style" "activated".