Quote:
Originally Posted by hannah
I have my H2O for a good month and I am delighted. So far I've had no problems.
I read only books without drm sideloaded with calibre and library books with adobe drm.
My only complaints are the images. They can be very small in some books and this can be annoying when trying to see a map in a book. I had the same problem with some children books, the images were mostly to small.
And I tried a Charlie brown epub from the library once and it was not readable because only 3/4 from every page was displayed.
|
That is more an issue with how the ebook creator decided to handle images. If an SVG wrapper or a % is used for the image, it can be set to display about the same amount of screen area on any device. If the image is simply displayed without any styling, the image might look good on a 600x800 device where it nearly fills the screen while on a 1080x1430 device, it will take up about 30% of the page.
For cover images, I use the svg wrapper technique which I prefer for full screen images. Other images I use a % width or height setting depending on the aspect ratio of the image.
The first example is what I normally use for cover images so the cover image is automagically scaled to as near to full screen as the aspect ratio allows. In the 2nd example, the publisher used a height setting of 100% which works until the 100% height makes the width greater than the screen width. The 3rd example used no styling so the a 450x600 image will take that many pixels regardless of the display resolution -- also the creator of the 3rd example didn't bother to use any centering code.
Code:
<style type="text/css">
@page {padding: 0pt; margin:0pt}
body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 545 819" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="819" width="545" xlink:href="../Images/cover.jpg" /></svg>
</div>
Code:
<div style="text-align:center;"><img alt="image" height="100%" src="../Images/cover.jpg" /></div>
Code:
<div><img alt="" src="../Images/cover.jpeg" /></div>