View Single Post
Old 07-06-2016, 09:19 AM   #10
Griu
Enthusiast
Griu can extract oil from cheeseGriu can extract oil from cheeseGriu can extract oil from cheeseGriu can extract oil from cheeseGriu can extract oil from cheeseGriu can extract oil from cheeseGriu can extract oil from cheeseGriu can extract oil from cheese
 
Posts: 40
Karma: 1010
Join Date: Jun 2016
Device: Kobo Glo HD, Kobo Aura One
Quote:
Originally Posted by GeoffR View Post
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"/>
Actually I checked and none of my books are setting a fixed size, all images in all my books show as this
Code:
<img alt="image" src="../images/part1_1.jpg"/>
Griu is offline   Reply With Quote