tips for adding images in epub - Page 2

RS21 · 01-25-2015, 09:24 AM

I used this solution to make my cover image fit in the reader's screen.

Quote:

Originally Posted by pdurrant

[B]
It is possible to get an image to properly resize to fill the page using an svg wrapper.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 573 800" preserveAspectRatio="xMidYMid meet">
<image width="573" height="800" xlink:href="../images/img0032.png" />
</svg>

which I use for the cover image.

However, I noticed that the eBook took about 40 seconds to load for the first time. Removing the cover image made it load much faster, about 5 seconds, identifying the cover image as the culprit.

So, I tried a more straight-forward solution. Mark-up:

Code:

<body>
  <div>
    <img id="cover" src="../Images/cover.jpg" />
  </div>
</body>

and style:

Code:

img#cover 
{
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

This will maintain aspect ratio, and will horizontally center the image, if the screen is wider than the image. Vertical alignment will be top.

pdurrant · 01-25-2015, 10:05 AM

Quote:

Originally Posted by RS21

I used this solution to make my cover image fit in the reader's screen.

However, I noticed that the eBook took about 40 seconds to load for the first time. Removing the cover image made it load much faster, about 5 seconds, identifying the cover image as the culprit.

So, I tried a more straight-forward solution. Mark-up:

Code:

<body>
  <div>
    <img id="cover" src="../Images/cover.jpg" />
  </div>
</body>

and style:

Code:

img#cover 
{
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

This will maintain aspect ratio, and will horizontally center the image, if the screen is wider than the image. Vertical alignment will be top.

I'm surprised that you see this preserving the aspect ratio. What are you viewing it on?

Jellby · 01-25-2015, 10:40 AM

Quote:

Originally Posted by RS21

Code:

img#cover 
{
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

This will maintain aspect ratio,

No guarantee, as far as I know. An oversized image could be downscaled to 100% width and 100% height, which does not preserve aspect ratio.

Quote:

and will horizontally center the image

only if the reader does not ignore auto margins, and it is allowed to.

The problem of that approach (and actually the same more or less applies to the standard SVG wrapper) is that there is no way to access screen height. "height: 100%" might give you a full height, or maybe not.

dgatwood · 01-27-2015, 11:11 PM

Quote:

Originally Posted by Jellby

No guarantee, as far as I know. An oversized image could be downscaled to 100% width and 100% height, which does not preserve aspect ratio.

only if the reader does not ignore auto margins, and it is allowed to.

The problem of that approach (and actually the same more or less applies to the standard SVG wrapper) is that there is no way to access screen height. "height: 100%" might give you a full height, or maybe not.

A height of 100% will give you the full height as long as there's no padding or margins anywhere in any of your enclosing elements, and as long as they're all set to a height of 100%. This approach, of course, requires each SVG image to be in a separate HTML file.

It's too bad EPUB 3 didn't mandate support for CSS 3, because then you'd have vh/vw/vmin/vmax.... *sigh*

Jellby · 01-28-2015, 05:51 AM

Quote:

Originally Posted by dgatwood

A height of 100% will give you the full height as long as there's no padding or margins anywhere in any of your enclosing elements, and as long as they're all set to a height of 100%.

And as long as the renderer interprets it that way.

Toxaris · 01-28-2015, 07:49 AM

Some readers will actually give issues if you use height: 100%.

dgatwood · 01-29-2015, 02:56 AM

Quote:

Originally Posted by Jellby

And as long as the renderer interprets it that way.

There's no other valid way to interpret it. The CSS spec is pretty explicit about what 100% means. It means 100% of the enclosing container's size, and 100% on the outermost tag (HTML) means fill the entire viewport. The only problems you might run into involve padding and margins (because it is 100% of the total box size, not the interior dimensions of the box).

In theory (I haven't tried this), you could also set the position to absolute and set left, right, top, and bottom to 0, and you should get the same results. Or you could set width and height to auto instead of 100%. Just as long as you do it on all elements (including html), it should work, but again, I haven't tried it.

Quote:

Originally Posted by Toxaris

Some readers will actually give issues if you use height: 100%.

Really? Experimentally, it works fine for me in ADE, RMSDK (e.g. Nook), iBooks, Kindle, and other WebKit-based readers. That should cover everything but a handful of obscure third-party reader apps (and experimentally, it works on nearly all of those, at least on iOS, and I filed bugs against the one that misbehaved with zero-length margins/padding, and I'm pretty sure they fixed it).

What readers did you have problems with height: 100% in, and under what circumstances?

Toxaris · 01-29-2015, 03:37 AM

Quote:

Originally Posted by dgatwood

Really? Experimentally, it works fine for me in ADE, RMSDK (e.g. Nook), iBooks, Kindle, and other WebKit-based readers. That should cover everything but a handful of obscure third-party reader apps (and experimentally, it works on nearly all of those, at least on iOS, and I filed bugs against the one that misbehaved with zero-length margins/padding, and I'm pretty sure they fixed it).

What readers did you have problems with height: 100% in, and under what circumstances?

Really. I would not name the reader obscure though...
In certain cases Sony readers will have an issue with this and will not allow you to advance to the next page. You have to actually have to go to the next page by entering the page number.

Jellby · 01-29-2015, 05:09 AM

Quote:

Originally Posted by dgatwood

There's no other valid way to interpret it. The CSS spec is pretty explicit about what 100% means. It means 100% of the enclosing container's size, and 100% on the outermost tag (HTML) means fill the entire viewport.

Unfortunately, that's in CSS 2.1, CSS 2.0 is not so clear (it makes to mention of the initial containing block for the root element), and ePub 2.0.1 requires CSS 2.0, not 2.1.

Of course, with ePub 3 and CSS 3, the situation is different, and then you can blame the renderers for not following the specs if they don't. But I still live in an ePub 2 world

dgatwood · 01-30-2015, 01:01 AM

Quote:

Originally Posted by Jellby

Unfortunately, that's in CSS 2.1, CSS 2.0 is not so clear (it makes to mention of the initial containing block for the root element), and ePub 2.0.1 requires CSS 2.0, not 2.1.

Wow, you're right. I was confused because the CSS 2.1 spec is incorrectly published as "CSS2" on the W3C's website. Blecch.

Well, actually, it does mention it. It just says that it is defined by the user agent.... Such text, in specifications, is almost invariably a mistake, in my experience.

Jellby · 01-30-2015, 01:17 PM

To be honest, regardless of what the specs says, it all boils down to what the readers implement, and we may be lucky there.

JSWolf · 01-30-2015, 04:30 PM

Quote:

Originally Posted by Toxaris

Really. I would not name the reader obscure though...
In certain cases Sony readers will have an issue with this and will not allow you to advance to the next page. You have to actually have to go to the next page by entering the page number.

I've never seen this with a 505, 650, & T1. So which Sony Readers have this problem?

Toxaris · 01-30-2015, 05:02 PM

The T1 for sure. I reported it quite some time ago in the Sony subforum. It was a combination of height and another attribute, I believe line-height.

found it: https://www.mobileread.com/forums/sho...9&postcount=16

xmlgirl · 05-08-2015, 10:21 AM

This is an older thread, but wondering if these are still the best ways out there to size images? Nothing better has come along?

sjkramer · 09-25-2015, 07:25 PM

Quote:

Originally Posted by xmlgirl

This is an older thread, but wondering if these are still the best ways out there to size images? Nothing better has come along?

Just seconding this query.

01-30-2015, 05:02 PM	#28
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	The T1 for sure. I reported it quite some time ago in the Sony subforum. It was a combination of height and another attribute, I believe line-height. found it: https://www.mobileread.com/forums/sho...9&postcount=16 Last edited by Toxaris; 01-30-2015 at 05:05 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Adding epubs to iTunes with cover images	sartori	ePub	31	09-30-2010 12:39 PM
Adding Images To Ebook	gtshadow	Calibre	3	09-29-2010 11:23 AM
EPUB tips from Adobe	AprilHare	Workshop	1	12-20-2009 04:59 PM
Tips on creating EPUB	Student1	ePub	3	03-22-2009 12:41 AM

01-28-2015, 07:49 AM	#21
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Some readers will actually give issues if you use height: 100%.

01-30-2015, 01:17 PM	#26
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	To be honest, regardless of what the specs says, it all boils down to what the readers implement, and we may be lucky there.

05-08-2015, 10:21 AM	#29
xmlgirl Enthusiast Posts: 29 Karma: 496864 Join Date: Mar 2012 Location: Virginia Device: none	This is an older thread, but wondering if these are still the best ways out there to size images? Nothing better has come along?

Advert

Advert