01-25-2015, 09:24 AM | #16 | |
Junior Member
Posts: 1
Karma: 10
Join Date: Jan 2015
Device: Sony PRS-650
|
Alternative to cover svg wrapper
I used this solution to make my cover image fit in the reader's screen.
Quote:
So, I tried a more straight-forward solution. Mark-up: Code:
<body> <div> <img id="cover" src="../Images/cover.jpg" /> </div> </body> Code:
img#cover { max-width: 100%; max-height: 100%; display: block; margin-left: auto; margin-right: auto; } |
|
01-25-2015, 10:05 AM | #17 | |
The Grand Mouse 高貴的老鼠
Posts: 71,640
Karma: 306652114
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Quote:
|
|
Advert | |
|
01-25-2015, 10:40 AM | #18 | ||
frumious Bandersnatch
Posts: 7,516
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Quote:
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. |
||
01-27-2015, 11:11 PM | #19 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
It's too bad EPUB 3 didn't mandate support for CSS 3, because then you'd have vh/vw/vmin/vmax.... *sigh* |
|
01-28-2015, 05:51 AM | #20 |
frumious Bandersnatch
Posts: 7,516
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
Advert | |
|
01-28-2015, 07:49 AM | #21 |
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-29-2015, 02:56 AM | #22 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
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. 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? |
01-29-2015, 03:37 AM | #23 | |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Quote:
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. |
|
01-29-2015, 05:09 AM | #24 | |
frumious Bandersnatch
Posts: 7,516
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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 |
|
01-30-2015, 01:01 AM | #25 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
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. |
|
01-30-2015, 01:17 PM | #26 |
frumious Bandersnatch
Posts: 7,516
Karma: 19000001
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.
|
01-30-2015, 04:30 PM | #27 |
Resident Curmudgeon
Posts: 74,658
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
I've never seen this with a 505, 650, & T1. So which Sony Readers have this problem?
|
01-30-2015, 05:02 PM | #28 |
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. |
05-08-2015, 10:21 AM | #29 |
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?
|
09-25-2015, 07:25 PM | #30 |
Connoisseur
Posts: 68
Karma: 526028
Join Date: Nov 2009
Location: New York, NY
Device: iphone
|
Seconded
|
|
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 |