View Single Post
Old 07-06-2016, 01:20 AM   #8
GeoffR
Wizard
GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.
 
GeoffR's Avatar
 
Posts: 3,821
Karma: 19162882
Join Date: Nov 2012
Location: Te Riu-a-Māui
Device: Kobo Glo
Quote:
Originally Posted by Griu View Post
I edited the book using Calibre and used the option to resize the image. I set the image to a much higher resolution, but the kobo keeps showing it the same way. I can se the size diffence in resolution if I export the images, but keeps showing up really small on the kobo.
That probably means the publisher has specified a fixed pixel size for the image in the HTML or CSS stylesheet. You'll have to use the second method in that case, and edit the HTML/CSS styles associated with the image.

It is hard to give a detailed example of how to do that, because there are a multitude of different ways the publisher can set out the HTML and CSS, but if you post the section of the HTML that refers to the image, and the associated CSS styles from the stylesheet then I can suggest something.

Here is a simple example from the last book I read (published by Random House UK) where the publisher has used a fixed pixel size for an image:
HTML:
Code:
<div class="part_image">
  <img alt="image" height="129" src="../images/part1_1.jpg" width="220"/>
</div>
CSS:
Code:
div.part_image
{
	text-align: center;
	text-indent: 0;
	margin-top: 10%;
	margin-bottom: 0em;
}
In this case the image contains a title in a font that is about 80px high. Resizing the JPG file has no effect because the height and width have been set in the HTML.

If I simply remove the height and width then the image will be displayed at the pixel size of the JPG file, i.e. resizing the JPG file would cause the image to resize:
Code:
<img alt="image" src="../images/part1_1.jpg"/>
If I wanted the image to be sized relative to the height of the device's screen:
Code:
<img alt="image" style="height:20%;width:auto;" src="../images/part1_1.jpg"/>
If I wanted the image to resize relative to the currently selected font size, with the 80px title in the JPG corresponding to approx 3em font height:
Code:
<img alt="image" style="height:auto;width:8.25em;max-width:100%;" src="../images/part1_1.jpg"/>

Last edited by GeoffR; 07-06-2016 at 01:39 AM. Reason: ... height of the device's screen ...
GeoffR is offline   Reply With Quote