12-06-2020, 07:55 PM | #1 |
Member
Posts: 23
Karma: 13884
Join Date: Jan 2014
Device: apple ipad (3rd generation)
|
What dimensions should image files be within books?
I edited an epub in Sigil to replace the cover page and any pages with full-page image reproductions. I resized all the images in GIMP, but it seems there's always a little bit of the image splashing over to the top of the next screen. The bottom always gets cut off. I don't know if the device makes a difference, but I'm usually reading my books on an iPad.
|
12-12-2020, 09:17 PM | #2 |
A Hairy Wizard
Posts: 3,123
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
I noticed this as well...my fix is to use an SVG wrapper for full page images along with the vh/vw units for height and width. I also set the background color - usually to black, but to whatever complements the cover image. That fills in any blank areas around the image. Set the width and height coordinates to the actual size (in pixels) of the image.
Code:
<body style="margin:0; padding:0; text-align:center; background-color:black"> <h1 style="display:none" title="Cover"/> <div style="margin:0; padding:0"> <svg xmlns="http://www.w3.org/2000/svg" height="100vh" width="100vw" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 473 603" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="473" height="603" xlink:href="../Images/cover.jpg"/> </svg> </div> </body> |
12-20-2020, 07:25 PM | #3 | |
Member
Posts: 23
Karma: 13884
Join Date: Jan 2014
Device: apple ipad (3rd generation)
|
Quote:
Here's what I currently have for the book cover. The dimensions are 1127x1800 pixels but I didn't put that anywhere in the code. All in all, it looks great and I don't care if it fills the entire screen, but it does cut a portion of the bottom of the image off and spills it over onto the next page. Please guide me where I can make some changes: Code:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link href="../Styles/nyrb.css" rel="stylesheet" type="text/css"/> <title>Cover</title> <style type="text/css"> img { max-width: 100%; } </style> <meta content="urn:uuid:4bf76f52-8996-4795-95a0-48e28ff4cf4d" name="Adept.expected.resource"/> </head> <body> <div style="text-align: center;"><img alt="Doomsday Book" src="../Images/cover.png"/> </div> </body> </html> |
|
12-21-2020, 01:20 PM | #4 |
A Hairy Wizard
Posts: 3,123
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Works every time.... just copy/paste onto its own html file...and then, of course, you need to select "Publisher's layout" from Marvin settings otherwise Marvin will ignore most of your styling for it's own. Just open your book in Marvin, tap the screen and go to settings by hitting the Aa in the top right corner, scroll down the settings list a little (below Uniform text size)...
Code:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cover</title> </head> <body style="margin:0; padding:0; text-align:center; background-color:black"> <h1 style="display:none" title="Cover"/> <div style="margin:0; padding:0"> <svg xmlns="http://www.w3.org/2000/svg" height="100vh" width="100vw" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1127 1800" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="1127" height="1800" xlink:href="../Images/cover.png"/> </svg> </div> </body> |
12-21-2020, 01:24 PM | #5 |
A Hairy Wizard
Posts: 3,123
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
In your attempt you have simply set the width of the image to be 100%...and it will automatically size the height to keep the proper aspect ratio. This will often cause the image to flow over to the next page because most cover images are taller than they are wide. That's why an svg wrapper works so well. It automatically maximizes the image to fill the screen with the proper aspect ratio. (assuming you use the settings I provided above).
I actually keep this as a template...all I need to do is enter the exact image dimensions and it always works. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
KF8 relative image dimensions problem | SBT | Kindle Formats | 6 | 11-25-2014 03:48 AM |
What should the dimensions of an ebook cover image be? | ecbritz | Sigil | 18 | 09-07-2013 03:11 AM |
Best Image Dimensions for Fire | x2far | Kindle Formats | 3 | 04-25-2013 07:38 PM |
Image dimensions for Kindle Fire | x2far | Workshop | 1 | 02-08-2012 06:39 PM |
Image dimensions | eBookNoir | Barnes & Noble NOOK | 2 | 02-14-2011 03:22 PM |